2016-11-2 藍(lán)藍(lán)設(shè)計(jì)的小編
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
font-weight的屬性值有100、200、300、400、500、600、700、800、900和normal、bold、lighter、bolder，它們的區(qū)別是？
另外，在實(shí)際開發(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來(lái)劃分其字重(字體的粗細(xì)度)，那么樣式指定的font-weight屬性值與字體的字重則一一對(duì)應(yīng)。并且normal等價(jià)于400，bold等價(jià)于700。
但實(shí)際上，我們一般遇到的字體很多時(shí)候都是使用一些通用的詞描述劃分其字重，如下所示。
常見的字重?cái)?shù)值大致對(duì)應(yīng)的字重描述詞語(yǔ)：
為什么說(shuō)大致對(duì)應(yīng)呢？在有些字庫(kù)下是有差異的，比如在Adobe Typekit字庫(kù)中對(duì)字重描述的劃分列表中，它列出Heavy指的是800而不是900。另外，在我們?nèi)粘Ｊ褂玫腜hotoshop和Sketch里面，Ultra Light是100，而Thin是200。
并且，字體所擁有的字重的數(shù)量實(shí)際上很少存在滿足有9個(gè)字重剛好跟100～900的CSS字重一一對(duì)應(yīng)的情況，通常字體擁有的字重?cái)?shù)量為4至6個(gè)。
不必?fù)?dān)心，起碼400和700對(duì)應(yīng)的字重至少是每種字體必備的，譬如常見的 Arial、Helvetica、Georgia等等，只有400(normal)和700(bold)。
bolder、lighter表示其字重值是基于從其父元素繼承而來(lái)的字重計(jì)算所得的，與normal、bold所代表的字重并無(wú)關(guān)系。
其值通常是根據(jù)下表計(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ù)值來(lái)劃分的，并且其含有的字重?cái)?shù)量是不一的，通常情況下為4-6個(gè)。
此時(shí)，就會(huì)出現(xiàn)樣式指定的字重?cái)?shù)值在字體中找不到直接對(duì)應(yīng)的字重，那瀏覽器是如何解決的呢？
Bingo！
那就是要靠字體匹配算法來(lái)解決。其中關(guān)于font-weight部分是這么提及到的：
講人話就是：
如果指定的font-weight數(shù)值，即所需的字重，能夠在字體中找到對(duì)應(yīng)的字重，那么就匹配為該對(duì)應(yīng)的字重。否則，使用下面的規(guī)則來(lái)查找所需的字重并渲染：
下面我們通過(guò)官方例子和實(shí)際測(cè)試來(lái)好好理解這個(gè)匹配算法規(guī)則。
W3C規(guī)范標(biāo)準(zhǔn)中給出這么一個(gè)例子：
注解：灰色標(biāo)記的是字體中缺少的字重，而黑色則是字體擁有的字重。
基于匹配算法規(guī)則，看圖理解所得：
Figure 15.圖指的是
| 字體庫(kù)內(nèi)直接匹配的字重 | 填空值(即通過(guò)算法間接匹配所得字重) |
|---|---|
| 400 | 300、200、100、500 |
| 700 | 600 |
| 900 | 800 |
拿font-weight: 300;來(lái)說(shuō)，字體中沒有可以直接匹配的字重，那么300小于400，則根據(jù)第一條規(guī)則，先降序查找匹配，但是都沒有可匹配的200、100，那么升序查找為400，結(jié)果可匹配。
Figure 16.圖指的是
| 字體庫(kù)內(nèi)直接映射的字重 | 填空值 |
|---|---|
| 300 | 200、100、400、500 |
| 600 | 700、800、900 |
這里需要注意的是，填空值500表現(xiàn)的是300的字重，而不是600的字重。
為什么呢？根據(jù)結(jié)果表現(xiàn)，我們可以反推出，字重在瀏覽器去渲染時(shí)早已經(jīng)按照算法去一一匹配好。也就是，400匹配的字重在500匹配之前已經(jīng)匹配好了（說(shuō)起來(lái)有點(diǎn)拗口，大家可以根據(jù)Figure.16的例子體會(huì)下）。
其余的，我就不多解釋了，大家可以根據(jù)結(jié)果檢查自己是否理解到位。
根據(jù)Google Fonts API – Droid Sans提供的Droid Sans字體，我們可以知道該字體擁有兩種字重。
根據(jù)字體匹配算法規(guī)則，我們可以預(yù)測(cè)其字重匹配應(yīng)該如下表所示：
| 字體庫(kù)內(nèi)直接映射的字重 | 填空值 |
|---|---|
| 400 | 300、200、100、500 |
| 700 | 600、800、900 |
也就是100、200、300、500會(huì)表現(xiàn)為跟400同一種字重，600、800、900會(huì)表現(xiàn)為跟700同一種字重。
利用Google Fonts提供的Droid Sans，我們進(jìn)行了實(shí)例測(cè)試－(DroidSans.html)來(lái)驗(yàn)證。
結(jié)果如下圖，證明我們的預(yù)測(cè)結(jié)果正確，該字體匹配算法規(guī)則運(yùn)行有效。
根據(jù)以上的研究，可以總結(jié)出三點(diǎn)：
藍(lán)藍(lán)設(shè)計(jì)( www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.tuitetiyu.cn