2016-11-2 藍藍設計的小編
font-weight的屬性值有100、200、300、400、500、600、700、800、900和normal、bold、lighter、bolder，它們的區別是？
另外，在實際開發中，我們應該使用數值表達還是文字表達呢？
根據W3C Fonts節章的規范標準，可知：
font-weight可取值：100～900和normal、bold、bolder、lighter。
如果字體使用九階有序數值100～900來劃分其字重(字體的粗細度)，那么樣式指定的font-weight屬性值與字體的字重則一一對應。并且normal等價于400，bold等價于700。
但實際上，我們一般遇到的字體很多時候都是使用一些通用的詞描述劃分其字重，如下所示。
常見的字重數值大致對應的字重描述詞語：
為什么說大致對應呢？在有些字庫下是有差異的，比如在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表示其字重值是基于從其父元素繼承而來的字重計算所得的，與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數值，即所需的字重，能夠在字體中找到對應的字重，那么就匹配為該對應的字重。否則，使用下面的規則來查找所需的字重并渲染：
下面我們通過官方例子和實際測試來好好理解這個匹配算法規則。
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的例子體會下）。
其余的，我就不多解釋了，大家可以根據結果檢查自己是否理解到位。
根據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)來驗證。
結果如下圖，證明我們的預測結果正確，該字體匹配算法規則運行有效。
根據以上的研究，可以總結出三點：
藍藍設計( www.indbiotech.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務