話說CSS字體屬性font-family、font-style、font-size、font-weight、font-variant：

使用CSS，可以對字體進(jìn)行設(shè)置，字體屬性包括五種常見屬性：字體系列font-family、字體樣式/字體風(fēng)格font-style、字體大小font-size、字體粗細(xì)font-weight、字體變量font-variant。通過這五個屬性，可以設(shè)定文本在web頁面的顯示效果或文本的打印效果。

1.字體系列font-family

支持按照優(yōu)先級順序列出各種要指派使用的字體，當(dāng)用戶系統(tǒng)沒有安裝首選字體時候，向后搜索，選用下一個指派的字體解析顯示。
如：

說明：由于一般的操作系統(tǒng)與瀏覽器都安裝與支持以下字體，所以web開發(fā)中使用最安全的字體系列為：Arial、Helvetica、 Times New Roman、 Times、 Courier New 和 Courier。而Verdana、Georgia、Comic Sans MS、Trebuchet MS、Arial Black和Impact字體對于蘋果的Mac系統(tǒng)和微軟的Windows系統(tǒng)來說是安全的，但可能不支持安裝在像Linux這樣的開源操作系統(tǒng)中。其他經(jīng)常使用但是不太安全的字體還有：Palatino、Garamond、Bookman和Avant Garde等。

2.字體樣式/字體風(fēng)格font-style
font-style屬性有三個值：normal、italic和 oblique。三種字體風(fēng)格對應(yīng)三種表現(xiàn)的字體效果：
normal：默認(rèn)樣式。瀏覽器顯示一個標(biāo)準(zhǔn)的字體。
italic：瀏覽器會顯示一個斜體的字體。
oblique：瀏覽器會顯示一個傾斜的字體。

容易產(chǎn)生疑問和困惑是italic 和 oblique 之間的區(qū)別。主要區(qū)別總結(jié)為：

字體樣式italic、oblique 需要系統(tǒng)中字體文件的支持。
字體名中帶有“Italic”、“Cursive”（草書）或“Kursiv”（一種書信體）的字體通常標(biāo)記為“italic”。
字體名中帶有“Oblique”、“Slanted”（斜體）或“Incline”（傾斜）的字體通常標(biāo)記為“oblique”。
如果“italic”字體不存在，而只有Oblique字體，則使用后者“oblique”字體，但若“oblique”字體不存在，則不能用“italic”替代，此時瀏覽器會將正常直立字體傾斜一個角度來作為傾斜字體使用。
在很多情況下，斜體和傾斜字體幾乎看不出區(qū)別，特別是對那些沒有特別提供這兩種樣式的字體來說
從本質(zhì)上來說，斜體（italic）是一種簡單的字體風(fēng)格，對每個字母的結(jié)構(gòu)有微小的變動，外觀區(qū)別于正常字體風(fēng)格。不過，傾斜（oblique）風(fēng)格則是正常豎直文本的一個傾斜版本。

通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去不存在明顯的差別。

3.字體大小font-size

字體大小的設(shè)置主要分兩種類型：固定大小和相對大小。

字體大小的度量單位包括很多，常用的有像素px、磅pt、em、百分比。

①px，表示pixel，像素的大小隨用戶顯示器的大小和像素深度而變。一個像素等于屏幕上一個點的高度/寬度，是屏幕上顯示的最小單位。這個度量單位最適合顯示器。
②pt，表示point，來源于打印設(shè)計，是一印刷行業(yè)常用單位，叫“磅”，等于1/72英寸。pt是一個標(biāo)準(zhǔn)的長度單位，最適合于印刷，但也常用于用戶顯示器。
③em，相當(dāng)于當(dāng)前字體1個字大小，用于描述相對尺寸。即％，在css中，1em＝100％，結(jié)合CSS繼承關(guān)系使用，具有靈活性。 需要注意的是，相對字體大小的計算是基于父元素的字體大小，如果元素之間層層嵌套，問題有時候會復(fù)雜的不可預(yù)料。例如，對于在單元格、表格、div中的一段文本，如果在每一級都規(guī)定了自己的相對字體大小規(guī)則，那么相對度量方式就會產(chǎn)生復(fù)合效應(yīng)。 不同的瀏覽器間并沒有一個統(tǒng)一的標(biāo)準(zhǔn)來定義如何指定一個給定元素的父元素，以及在相對字體大小計算中哪一個才是參考字體。所以，為了成功使用相對字體大小方式，需要仔細(xì)規(guī)劃網(wǎng)頁設(shè)計和CSS樣式，盡量避免潛在的元素嵌套問題。
④百分比，相對于當(dāng)前字體em的比例）。
而英寸in（72pt）、厘米cmt（約28pt）、毫米mm（約3pt）、pic（相當(dāng)于12pt）這些度量單位則適合于打印，是一種印刷度量單位。ex是相對于當(dāng)前字體大小，等于小寫字母x的高度，是一種不常用的度量單位。

擴(kuò)展：顯示器的PPI（DPI），表示pixel（dot）per inch，每英寸的像素（點）數(shù)，表示“清晰度”，“精度” 。設(shè)置更改方法：桌面上點右鍵，彈出快捷菜單： > 屬性 > settings > Advanced > General > DPI setting > 96 DPI。

在瀏覽網(wǎng)頁過程中，所有的“大”“小”概念，都是基于“屏幕”這個“顯示界面”上。“屏幕”上的各種信息，包括文字、圖片、表格等等，都會隨屏幕的分辨率變化而變化。在不同分辨率下，無論是px還是pt，屏幕上的各種信息都會改變大小。
由于屏幕大小不同，分辨率也不同，要保證一個字體在所有用戶面前呈現(xiàn)的大小都一樣，這是一個不可能實現(xiàn)的任務(wù)。

在Windows系統(tǒng)紅，px和pt的使用區(qū)別，只有當(dāng)用戶改變默認(rèn)的96DPI下才會產(chǎn)生。使用px定義文字，無論用戶怎么設(shè)置，都不會改變大小；使用pt定義文字，當(dāng)用戶設(shè)置超過96DPI的值，數(shù)值越大，字體就越大。附公式：px = pt * DPI / 72 。

4.字體粗細(xì)font-weight
font-weight用戶設(shè)定字體的濃淡粗細(xì)程度，可能的值：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
可以分為三類：關(guān)鍵字屬性，包括normal 、bold 兩個；相對關(guān)鍵字屬性，它的粗細(xì)是相對于從上級父元素的繼承值而言的，包括bolder和lighter兩個；數(shù)字屬性，包括從“100”到“900”的9個數(shù)字序列（只能是100的整數(shù)倍）。這個數(shù)字序列表示從最細(xì)（100）到最粗（900）的字體粗細(xì)程度。
可用值      屬性值的說明

normal      缺省值。正常字體顯示。
bold        粗體
bolder      相對于父元素稍粗
lighter     相對于父元素稍細(xì)
100         至少和200一樣淡
200         至少和100一樣粗，至少和300一樣淡
300         至少和200一樣粗，至少和400一樣淡
400         字體正常顯示，相當(dāng)于normal
500         至少和400一樣粗，至少和600一樣淡
600         至少和500一樣粗，至少和700一樣淡
700         粗體，相當(dāng)于bold
800         至少和700一樣粗，至少和800一樣淡
900         至少和800一樣粗

字體粗細(xì)屬性是根據(jù)用戶電腦上安裝的字體作相應(yīng)匹配顯示的。很多情況下，由于系統(tǒng)作了最相近的匹配，從顯示效果上很難看出不同的 font-weight值的區(qū)別。對于種類繁多花樣百出的字體而言，目前并沒有一個統(tǒng)一的規(guī)則標(biāo)明粗細(xì)的程度。有的字體名稱本身就能描繪粗細(xì)程度，如Arial Bold字體顯示本身就比Arial粗不少，像這樣的字體名稱的主要作用就是在單個字體集中區(qū)別字體的粗細(xì)程度。
如果某種字體集中已使用了9級數(shù)值的范圍（如OpenType一樣），字體的粗細(xì)應(yīng)該直接與9級數(shù)值相匹配。如果一種字體同時擁有Medium、Book、Regular、Roman或者Normal的字體集名稱，Medium通常分配為“500”，其他4個分配為“400”。如果字體集中有標(biāo)記為“bold”的名稱，相當(dāng)于數(shù)值“700”。如果字體集中少于9級粗細(xì)級別，參照缺失填補(bǔ)方式的規(guī)定。有了以上匹配方式，對于“bolder”和“lighter”的匹配也不難理解。“bolder”就是匹配字體集中可用的下一級較粗字體，反之“lighter”也是一樣，匹配下一級較細(xì)字體。它們的參照系都是繼承值，因此粗細(xì)程度都是相對于繼承值而言的。

如果字體集中少于9級粗細(xì)度算法，那么填補(bǔ)缺失的方法如表所示：

填補(bǔ)填補(bǔ)缺失的方法

5.字體變量font-variant
font-variant 屬性設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余大寫文本相比，其字體尺寸偏小。

可能的值
值         描述
normal         默認(rèn)值。瀏覽器會顯示一個標(biāo)準(zhǔn)的字體。
small-caps     瀏覽器會顯示小型大寫字母的字體。
inherit     規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值。任何的版本的IE（包括 IE8）都不支持屬性值 "inherit"。
對于web開發(fā)，一般不要在一篇文章中定義超過3級的粗細(xì)程度，且頁面設(shè)計時粗細(xì)程度應(yīng)有所跳躍，否則反而不能突出加粗的內(nèi)容。

最新評論