CSS的字體樣式屬性
CSS的字體樣式屬性用于定義文本的字體系列、大小、風(fēng)格等，CSS常用的字體樣式屬性如表3-9所示。
表3-9 字體樣式屬性
| 屬性 | 允許取值 | 描述 |
| font-size:字號(hào)大小 | 1em、5em等 | em表示相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸 |
| 5px | px表示像素，最為常用，推薦使用 |
| font-family:字體 | “微軟雅黑” | 網(wǎng)頁(yè)中常用的字體有宋體、微軟雅黑、黑體等 |
| font-weight:字體粗細(xì) | normal | 默認(rèn)值，定義標(biāo)準(zhǔn)的字符 |
| border | 定義粗體字符 |
| bolder | 定義更粗體字符 |
| ligthter | 定義更細(xì)字體 |
| 100~900 | 定義由細(xì)到粗的字符，其中400等同于normal |
| font-style:字體風(fēng)格 | normal | 默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式 |
| italic | 瀏覽器會(huì)顯示斜體的字體樣式 |
| oblique | 瀏覽器會(huì)顯示傾斜的字體樣式 |
| word-wrap:長(zhǎng)單詞或URL自動(dòng)換行 | normal | 只在允許的斷點(diǎn)處換行（默認(rèn)） |
| break-word | 在長(zhǎng)單詞或URL地址內(nèi)部自動(dòng)換行 |
1.字體屬性合寫(xiě)
除以上常用的屬性外，CSS還支持字體的合成功能，font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置，其基本語(yǔ)法格式如下。
| 選擇器{font:font-style || font-weight || font-size || line-height || font-family} |
2.CSS3的@font-face規(guī)則
@font-face是CSS3的新特性，用于定義服務(wù)器字體。通過(guò)@font-face規(guī)則，開(kāi)發(fā)者便可以使用用戶(hù)計(jì)算機(jī)中未安裝的字體。
@font-face規(guī)則的語(yǔ)法格式如下：
| @font-face{ font-family:<YourWebFontName>; src:<source>[<format>][,<source>[<format>]]*; [font-weight:<weight>] [font-style:<style>];} |
@font-face規(guī)則的取值說(shuō)明如下。
(1)YourWebFontName：自定義的字體名稱(chēng)，最好是使用下載的默認(rèn)字體，它將被引用到Web元素中的font-family,如“font-family:”myFont””.
source:此值指的是自定義的字體存放路徑，可以是相對(duì)路徑也可以是絕對(duì)路徑。
(2)format:此值指的是自定義的字體格式，主要用來(lái)幫助瀏覽器識(shí)別自定義的字體格式，其值主要有truetype、opentype、truetype-aat、 embedded-opentype 、svg等幾種類(lèi)型。
(3)weight和style:weight定義字體是否為粗體，style主要定義字體樣式，如斜體。
@font-face規(guī)則的具體用法如例3-4所示。運(yùn)行頁(yè)面效果如圖3-6所示。
例3-4 example04.html
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>@font-face用法</title> </head> <style> @font-face { font-family:myFont; src: url('font/書(shū)法.ttf'); } div{ font-family: myFont; font-size: 4em; } </style> <body> <div>使用@font-size,應(yīng)用漂亮的Web字體</div> </body> </html> |
圖3-6 特殊字體的頁(yè)面效果
