如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

問題提出

font-weight的屬性值有100、200、300、400、500、600、700、800、900和normal、bold、lighter、bolder，它們的區(qū)別是？
另外，在實際開發(fā)中，我們應(yīng)該使用數(shù)值表達(dá)還是文字表達(dá)呢？

認(rèn)識font-weight

根據(jù)W3C Fonts節(jié)章的規(guī)范標(biāo)準(zhǔn)，可知：

font-weight可取值：100～900和normal、bold、bolder、lighter。

100～900、normal、bold

如果字體使用九階有序數(shù)值100～900來劃分其字重(字體的粗細(xì)度)，那么樣式指定的font-weight屬性值與字體的字重則一一對應(yīng)。并且normal等價于400，bold等價于700。
但實際上，我們一般遇到的字體很多時候都是使用一些通用的詞描述劃分其字重，如下所示。

常見的字重數(shù)值大致對應(yīng)的字重描述詞語：

• 100 – Thin
• 200 – Extra Light (Ultra Light)
• 300 – Light
• 400 – Regular (Normal、Book、Roman)
• 500 – Medium
• 600 – Semi Bold (Demi Bold)
• 700 – Bold
• 800 – Extra Bold (Ultra Bold)
• 900 – Black (Heavy)

為什么說大致對應(yīng)呢？在有些字庫下是有差異的，比如在Adobe Typekit字庫中對字重描述的劃分列表中，它列出Heavy指的是800而不是900。另外，在我們?nèi)粘Ｊ褂玫腜hotoshop和Sketch里面，Ultra Light是100，而Thin是200。

并且，字體所擁有的字重的數(shù)量實際上很少存在滿足有9個字重剛好跟100～900的CSS字重一一對應(yīng)的情況，通常字體擁有的字重數(shù)量為4至6個。
不必?fù)?dān)心，起碼400和700對應(yīng)的字重至少是每種字體必備的，譬如常見的 Arial、Helvetica、Georgia等等，只有400(normal)和700(bold)。

bolder、lighter

bolder、lighter表示其字重值是基于從其父元素繼承而來的字重計算所得的，與normal、bold所代表的字重并無關(guān)系。

其值通常是根據(jù)下表計算而得的：

繼承值（Inherited value）	bolder所代表的字重	lighter所代表的字重
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

字體匹配算法

在上面我們已經(jīng)提到，在很多情況下，字體并不是以九階數(shù)值來劃分的，并且其含有的字重數(shù)量是不一的，通常情況下為4-6個。

此時，就會出現(xiàn)樣式指定的字重數(shù)值在字體中找不到直接對應(yīng)的字重，那瀏覽器是如何解決的呢？

Bingo！
那就是要靠字體匹配算法來解決。其中關(guān)于font-weight部分是這么提及到的：

講人話就是：
如果指定的font-weight數(shù)值，即所需的字重，能夠在字體中找到對應(yīng)的字重，那么就匹配為該對應(yīng)的字重。否則，使用下面的規(guī)則來查找所需的字重并渲染：

• 如果所需的字重小于400，則首先降序檢查小于所需字重的各個字重，如仍然沒有，則升序檢查大于所需字重的各字重，直到找到匹配的字重。
• 如果所需的字重大于500，則首先升序檢查大于所需字重的各字重，之后降序檢查小于所需字重的各字重，直到找到匹配的字重。
• 如果所需的字重是400，那么會優(yōu)先匹配500對應(yīng)的字重，如仍沒有，那么執(zhí)行第一條所需字重小于400的規(guī)則。
• 如果所需的字重是500，則優(yōu)先匹配400對應(yīng)的字重，如仍沒有，那么執(zhí)行第二條所需字重大于500的規(guī)則。

理解與運用

下面我們通過官方例子和實際測試來好好理解這個匹配算法規(guī)則。

官方例子

W3C規(guī)范標(biāo)準(zhǔn)中給出這么一個例子：

注解：灰色標(biāo)記的是字體中缺少的字重，而黑色則是字體擁有的字重。

基于匹配算法規(guī)則，看圖理解所得：
Figure 15.圖指的是

字體庫內(nèi)直接匹配的字重	填空值(即通過算法間接匹配所得字重)
400	300、200、100、500
700	600
900	800

拿font-weight: 300;來說，字體中沒有可以直接匹配的字重，那么300小于400，則根據(jù)第一條規(guī)則，先降序查找匹配，但是都沒有可匹配的200、100，那么升序查找為400，結(jié)果可匹配。

Figure 16.圖指的是

字體庫內(nèi)直接映射的字重	填空值
300	200、100、400、500
600	700、800、900

這里需要注意的是，填空值500表現(xiàn)的是300的字重，而不是600的字重。
為什么呢？根據(jù)結(jié)果表現(xiàn)，我們可以反推出，字重在瀏覽器去渲染時早已經(jīng)按照算法去一一匹配好。也就是，400匹配的字重在500匹配之前已經(jīng)匹配好了（說起來有點拗口，大家可以根據(jù)Figure.16的例子體會下）。

其余的，我就不多解釋了，大家可以根據(jù)結(jié)果檢查自己是否理解到位。

實際測試——Droid Sans

根據(jù)Google Fonts API – Droid Sans提供的Droid Sans字體，我們可以知道該字體擁有兩種字重。

根據(jù)字體匹配算法規(guī)則，我們可以預(yù)測其字重匹配應(yīng)該如下表所示：

字體庫內(nèi)直接映射的字重	填空值
400	300、200、100、500
700	600、800、900

也就是100、200、300、500會表現(xiàn)為跟400同一種字重，600、800、900會表現(xiàn)為跟700同一種字重。

利用Google Fonts提供的Droid Sans，我們進(jìn)行了實例測試－(DroidSans.html)來驗證。
結(jié)果如下圖，證明我們的預(yù)測結(jié)果正確，該字體匹配算法規(guī)則運行有效。

總結(jié)

根據(jù)以上的研究，可以總結(jié)出三點：

1. 通常情況下，一個特定的字體僅會包含少數(shù)的可用字重。若所指定的字重不存在直接匹配，則會通過字體匹配算法規(guī)則匹配使用鄰近的可用字重。這也就是為什么我們有時候使用特定字重時沒有“生效”，看起來跟其它字重差不多的原因所在。
2. 在實際中，最為常用的字重是normal和bold。我個人認(rèn)為400、700是等效于normal、bold的，無論哪一種表示方法都沒有關(guān)系，主要是個人習(xí)慣問題。
3. 但是，推薦使用數(shù)值替代lighter、bolder，因為這涉及到繼承計算的問題，用數(shù)值的話則會更為清晰明了。

藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)