如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

問題提出

font-weight的屬性值有100、200、300、400、500、600、700、800、900和normal、bold、lighter、bolder，它們的區別是？
另外，在實際開發中，我們應該使用數值表達還是文字表達呢？

認識font-weight

根據W3C Fonts節章的規范標準，可知：

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

100～900、normal、bold

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

常見的字重數值大致對應的字重描述詞語：

• 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)

為什么說大致對應呢？在有些字庫下是有差異的，比如在Adobe Typekit字庫中對字重描述的劃分列表中，它列出Heavy指的是800而不是900。另外，在我們日常使用的Photoshop和Sketch里面，Ultra Light是100，而Thin是200。

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

bolder、lighter

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

其值通常是根據下表計算而得的：

繼承值（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

字體匹配算法

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

此時，就會出現樣式指定的字重數值在字體中找不到直接對應的字重，那瀏覽器是如何解決的呢？

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

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

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

理解與運用

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

官方例子

W3C規范標準中給出這么一個例子：

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

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

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

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

Figure 16.圖指的是

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

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

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

實際測試——Droid Sans

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

根據字體匹配算法規則，我們可以預測其字重匹配應該如下表所示：

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

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

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

總結

根據以上的研究，可以總結出三點：

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

藍藍設計( www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務