font-weight我們很多人都用過，甚至經(jīng)常用，但你們真的了解font-weight嗎？今天我?guī)Т蠹疑钊肓私庖幌耭ont-weight
問題提出
font-weight的屬性值有100、200、300、400、500、600、700、800、900和normal、bold、lighter、bolder，它們的區(qū)別是？
認(rèn)識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來劃分其字重(字體的粗細度)，那么樣式指定的font-weight屬性值與字體的字重則一一對應(yīng)。并且normal等價于400，bold等價于700。
但實際上，我們一般遇到的字體很多時候都是使用一些通用的詞描述劃分其字重，如下所示。
常見的字重數(shù)值大致對應(yīng)的字重描述詞語：
· ? ?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)
為什么說大致對應(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
bolder、lighter表示其字重值是基于從其父元素繼承而來的字重計算所得的，與normal、bold所代表的字重并無關(guān)系。
其值通常是根據(jù)下表計算而得的：
字體匹配算法
在上面我們已經(jīng)提到，在很多情況下，字體并不是以九階數(shù)值來劃分的，并且其含有的字重數(shù)量是不一的，通常情況下為4-6個。
此時，就會出現(xiàn)樣式指定的字重數(shù)值在字體中找不到直接對應(yīng)的字重，那瀏覽器是如何解決的呢？
Bingo！
那就是要靠字體匹配算法來解決。其中關(guān)于font-weight部分是這么提及到的：
如果指定的font-weight數(shù)值，即所需的字重，能夠在字體中找到對應(yīng)的字重，那么就匹配為該對應(yīng)的字重。否則，使用下面的規(guī)則來查找所需的字重并渲染：
· ? ?如果所需的字重小于400，則首先降序檢查小于所需字重的各個字重，如仍然沒有，則升序檢查大于所需字重的各字重，直到找到匹配的字重。
· ? ?如果所需的字重大于500，則首先升序檢查大于所需字重的各字重，之后降序檢查小于所需字重的各字重，直到找到匹配的字重。
· ? ?如果所需的字重是400，那么會優(yōu)先匹配500對應(yīng)的字重，如仍沒有，那么執(zhí)行第一條所需字重小于400的規(guī)則。
· ? ?如果所需的字重是500，則優(yōu)先匹配400對應(yīng)的字重，如仍沒有，那么執(zhí)行第二條所需字重大于500的規(guī)則。
理解與運用
下面我們通過官方例子和實際測試來好好理解這個匹配算法規(guī)則。
官方例子
W3C規(guī)范標(biāo)準(zhǔn)中給出這么一個例子：
注解：灰色標(biāo)記的是字體中缺少的字重，而黑色則是字體擁有的字重。
基于匹配算法規(guī)則，看圖理解所得：
Figure 15.圖指的是
拿font-weight: 300;來說，字體中沒有可以直接匹配的字重，那么300小于400，則根據(jù)第一條規(guī)則，先降序查找匹配，但是都沒有可匹配的200、100，那么升序查找為400，結(jié)果可匹配。
Figure 16.圖指的是
這里需要注意的是，填空值500表現(xiàn)的是300的字重，而不是600的字重。
為什么呢？根據(jù)結(jié)果表現(xiàn)，我們可以反推出，字重在瀏覽器去渲染時早已經(jīng)按照算法去一一匹配好。也就是，400匹配的字重在500匹配之前已經(jīng)匹配好了（說起來有點拗口，大家可以根據(jù)Figure.16的例子體會下）。
其余的，我就不多解釋了，大家可以根據(jù)結(jié)果檢查自己是否理解到位。
總結(jié)
根據(jù)以上的研究，可以總結(jié)出三點:
1、通常情況下，一個特定的字體僅會包含少數(shù)的可用字重。若所指定的字重不存在直接匹配，則會通過字體匹配算法規(guī)則匹配使用鄰近的可用字重。這也就是為什么我們有時候使用特定字重時沒有“生效”，看起來跟其它字重差不多的原因所在。
2、在實際中，最為常用的字重是normal和bold。我個人認(rèn)為400、700是等效于normal、bold的，無論哪一種表示方法都沒有關(guān)系，主要是個人習(xí)慣問題。
3、但是，推薦使用數(shù)值替代lighter、bolder，因為這涉及到繼承計算的問題，用數(shù)值的話則會更為清晰明了。
本?文轉(zhuǎn)載自：凹凸實驗室
