2016-11-2 藍(lán)藍(lán)設(shè)計的小編
如果您想訂閱本博客內(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á)呢？
根據(jù)W3C Fonts節(jié)章的規(guī)范標(biāo)準(zhǔn)，可知：
font-weight可取值：100～900和normal、bold、bolder、lighter。
如果字體使用九階有序數(shù)值100～900來劃分其字重(字體的粗細(xì)度)，那么樣式指定的font-weight屬性值與字體的字重則一一對應(yīng)。并且normal等價于400，bold等價于700。
但實際上，我們一般遇到的字體很多時候都是使用一些通用的詞描述劃分其字重，如下所示。
常見的字重數(shù)值大致對應(yīng)的字重描述詞語：
為什么說大致對應(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表示其字重值是基于從其父元素繼承而來的字重計算所得的，與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ī)則來查找所需的字重并渲染：
下面我們通過官方例子和實際測試來好好理解這個匹配算法規(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é)果檢查自己是否理解到位。
根據(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ī)則運行有效。
根據(jù)以上的研究，可以總結(jié)出三點：
藍(lán)藍(lán)設(shè)計( www.sdgs6788.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.sdgs6788.com