1. 程式人生 > >文本屬性和字體屬性

文本屬性和字體屬性

文本 用戶 單位 英語 行高 自動 new 針對 times

文本屬性:

  文本對齊:

    text-align 屬性規定元素中的文本的水平對齊方式。

    屬性值:none,center,left,right,justify.

  文本顏色:

    text-indent屬性規定元素首行所進的距離,單位建議用em.

  文本修飾:

    text-decoration 屬性規定文本修飾的樣式。

    屬性值:none(默認),underline(下劃線),overline(上劃線),line-through(橫穿文字的線),inherit(繼承父元素的text-decoration屬性的值)

  行高:

    line-height就是行高的意思,指的就是一行的高度。

字體屬性:

  字體大小:

    font-size表示設置字體的大小,如果設置成inherit 表示繼承父元素的字體大小值。

  字體粗細:

    font-weight表示設置字體的粗細。

    屬性值:none(默認值,標準粗細) | bold(粗體) | border(更粗)| lighter(更細) | 100~900(設置具體粗細,400等同於normal,而700等同於bold)| inherit(繼承父元素字體的粗細值)

  字體系列:

font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif

如果瀏覽器不支持第一個字體,則會嘗試下一個。瀏覽器會使用它可識別的第一個值。如果都不支持則顯示宋體。

行高 line-height:  

    針對單行文本垂直居中

  公式:行高的高度等於盒子的高度,可以使當行文本垂直居中,註意只適用單行文本。

  針對多行文本垂直居中

  行高的高度不能小於字體的大小,不然上下字之間會緊挨一起。

  第一步,一個寬度300*300的盒子,看盒子中一共顯示了幾行文字,假如是5行,再看一下行高,如果行高是line-      height:30px; 那麽就知道行高*5=150px

  第二步,讓(盒子的高度-150px)/2=75;那麽設置盒子的padding-top:75px;同時保證盒子的高度為300px,那麽高度改為225px;

font-family介紹

  使用font-family註意幾點:

  1.網頁中不是所有字體都能用哦,因為這個字體要看用戶的電腦裏面裝沒裝,
  比如你設置: font-family: "華文彩雲"; 如果用戶電腦裏面沒有這個字體,
  那麽就會變成宋體
  頁面中,中文我們只使用: 微軟雅黑、宋體、黑體。
  如果頁面中,需要其他的字體,那麽需要切圖。 英語:Arial 、 Times New Roman

  2.為了防止用戶電腦裏面,沒有微軟雅黑這個字體。
  就要用英語的逗號,隔開備選字體,就是說如果用戶電腦裏面,
  沒有安裝微軟雅黑字體,那麽就是宋體:
  font-family: "微軟雅黑","宋體"; 備選字體可以有無數個,用逗號隔開。
  3.我們要將英語字體,放在最前面,這樣所有的中文,就不能匹配英語字體,就自動的變為後面的中文字體:
  font-family: "Times New Roman","微軟雅黑","宋體";

  4.所有的中文字體,都有英語別名,我們也要知道: 微軟雅黑的英語別名:font-family: "Microsoft YaHei";
  宋體的英語別名: font-family: "SimSun";font屬性能夠將font-size、line-height、font-family合三為一: font:12px/30px     "Times New Roman","Microsoft YaHei","SimSun";

  5.行高可以用百分比,表示字號的百分之多少。一般來說,都是大於100%的,因為行高一定要大於字號。font:12px/200% “宋體” 等價於 font:12px/24px “宋體”; 反過來,比如: font:16px/48px “宋體”;等價於 font:16px/300% “宋體”

文本屬性和字體屬性