CSS字體屬性允許您為字體設(shè)置各種樣式,例如文本的字體系列,大小和粗體,變體等。
在CSS樣式為文本內(nèi)容的字體,如提供幾個(gè)屬性:font-family
,font-style
,font-variant
,font-weight
和font-size
。下一節(jié)將逐一介紹這些屬性。
該font-family
CSS屬性允許您設(shè)置文本內(nèi)容的字體系列名稱,字體使用的優(yōu)先級(jí)列表。
該font-family
屬性可以包含多個(gè)字體名稱作為后備字體。首先列出您想要的字體,然后列出所有字體(如果不可用)。如果瀏覽器不支持第一種字體,他將嘗試下一種字體。字體系列聲明可能如下所示:
p { font-family: "Times New Roman", Times, serif; }測(cè)試看看?/?
注:如果字體系列的名稱超過(guò)一個(gè)單詞,它必須用引號(hào)引起來(lái),像"Times New Roman"
,"Courier New"
,"Trebuchet MS"
等等。
了解有關(guān)常用字體組合的更多信息;請(qǐng)檢查網(wǎng)絡(luò)安全字體。
通過(guò)font-style
屬性設(shè)置元素的文本內(nèi)容的字體樣式。
此屬性的可能值為:normal
,italic
或oblique
。
p.one { font-style: normal; } p.two { font-style: italic; } p.three { font-style: oblique; }測(cè)試看看?/?
注意:乍看之下,斜式和斜體樣式看起來(lái)是一樣的,但是有所不同。該italic
樣式使用的斜體版本的字體,而oblique
在另一方面文本僅僅是一個(gè)傾斜的版本正常的字體。
font-size
屬性設(shè)置元素文本內(nèi)容的字體大小。
有幾種方法可以指定字體大小值,例如,使用關(guān)鍵字,像素或ems。
通過(guò)在body元素上設(shè)置關(guān)鍵字字體大小,可以在頁(yè)面上其他任何地方設(shè)置相對(duì)字體大小,從而可以輕松地在整個(gè)頁(yè)面上相應(yīng)地縮放字體。使用以下關(guān)鍵字之一指定一個(gè)絕對(duì)的大小:xx-small
,x-small
,small
,medium
,large
,x-large
,xx-large
。
相對(duì)尺寸是使用以下關(guān)鍵字之一指定的:smaller
、、larger
。
body { font-size: large; } h1 { font-size: larger; } p { font-size: smaller; }測(cè)試看看?/?
當(dāng)需要像素精度時(shí),以像素值(例如12px,16px等)設(shè)置字體大小是一個(gè)不錯(cuò)的選擇。但是,結(jié)果可能會(huì)因?yàn)g覽器而有所不同,因?yàn)樗鼈兪褂貌煌乃惴▉?lái)實(shí)現(xiàn)類(lèi)似的效果。
h1 { font-size: 24px; } p { font-size: 14px; }測(cè)試看看?/?
可以通過(guò)定義以像素為單位的字體大小,但是這種方式不是很靈活,因?yàn)橛脩魺o(wú)法通過(guò)瀏覽器設(shè)置更改字體大小。例如,視力不佳的用戶可能希望將字體大小設(shè)置為大于您指定的大小。因此,如果要?jiǎng)?chuàng)建包含設(shè)計(jì),則應(yīng)避免將像素值用于字體大小。
提示:可以使用縮放工具在所有瀏覽器中調(diào)整文本大小。但是,此功能將調(diào)整整個(gè)頁(yè)面的大小,而不僅僅是文本。
em
單位是指父元素的字體大小。
em
值的大小是動(dòng)態(tài)的。定義font-size
屬性時(shí),an em
等于應(yīng)用于元素父級(jí)的字體的大小。
如果font-size
在body元素上設(shè)置a 為20px,則1em=20px
和2em=40px
。
如果您沒(méi)有在頁(yè)面上的任何地方設(shè)置字體大小,則它是瀏覽器的默認(rèn)值,是16px。因此,默認(rèn)為1em=16px
和2em=32px
。
h1 { font-size: 2em; /* 32px/16px=2em */ } p { font-size: 0.875em; /* 14px/16px=0.875em */ }測(cè)試看看?/?
警告: IE6和IE7放大了大小調(diào)整后的文本的大小。(在發(fā)布之前最后進(jìn)行測(cè)試)。
在所有瀏覽器中實(shí)現(xiàn)類(lèi)似效果的解決方案是font-size
為body元素設(shè)置默認(rèn)的百分比。一種流行的技術(shù)是font-size
將body的設(shè)置為62.5%
(即默認(rèn)16px的62.5%),等于10px或0.625em。
現(xiàn)在,您可以設(shè)置font-size
通過(guò)將使用em單位的任何元素,具有易于記憶的轉(zhuǎn)換,px
通過(guò)10值通過(guò)這種方式10px=1em
,12px=1.2em
,14px=1.4em
,16px=1.6em
,等。請(qǐng)參閱以下示例:
body { font-size: 62.5%; /* font-size 1em = 10px */ } p { font-size: 1.6em; /* 1.6em = 16px */ }測(cè)試看看?/?
提示:在萬(wàn)維網(wǎng)聯(lián)盟(W3C)建議使用EM或百分比(%)值,以創(chuàng)造更強(qiáng)大的,可擴(kuò)展的布局。
font-weight
屬性指定字體的粗細(xì)或粗體。
font-style屬性的可能值是:normal
,bold
,bolder
,lighter
,100
,200
,300
,400
,500
,600
,700
,800
,900
和inherit
。
數(shù)值100
- 900
指定字體粗細(xì),其中每個(gè)數(shù)字表示比其前身暗的粗細(xì)。400
與normal
&700
相同bold
。
的bolder
和lighter
,而其他的值是絕對(duì)字體權(quán)值是相對(duì)于繼承字體粗細(xì)。
p { font-weight: bold; }測(cè)試看看?/?
由于大多數(shù)字體只能以有限的重量使用。通常,它們僅以普通和粗體顯示。如果字體在指定的重量中不可用,則將選擇一個(gè)代替字體,它是最接近的可用重量。
font-variant
屬性允許以特殊的大寫(xiě)字母形式顯示文本。
小寫(xiě)大寫(xiě)字母或小寫(xiě)大寫(xiě)字母與普通大寫(xiě)字母稍有不同,在普通大寫(xiě)字母中,小寫(xiě)字母顯示為相應(yīng)大寫(xiě)字母的較小版本。
font-variant
屬性的值可能是normal
,small-caps
和inherit
。
p { font-variant: small-caps; }測(cè)試看看?/?