如果您想訂閱本博客內(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á)呢？

認(rèn)識(shí)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來(lái)劃分其字重(字體的粗細(xì)度)，那么樣式指定的font-weight屬性值與字體的字重則一一對(duì)應(yīng)。并且normal等價(jià)于400，bold等價(jià)于700。
但實(shí)際上，我們一般遇到的字體很多時(shí)候都是使用一些通用的詞描述劃分其字重，如下所示。

常見的字重?cái)?shù)值大致對(duì)應(yīng)的字重描述詞語(yǔ)：

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

為什么說大致對(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

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)查找所需的字重并渲染：

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

理解與運(yùn)用

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

官方例子

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

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

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

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

拿font-weight: 300;來(lái)說，字體中沒有可以直接匹配的字重，那么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)匹配好了（說起來(lái)有點(diǎn)拗口，大家可以根據(jù)Figure.16的例子體會(huì)下）。

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

實(shí)際測(cè)試——Droid Sans

根據(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)行有效。

總結(jié)

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.sdgs6788.com )是一家專注而深入的界面設(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ù)