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來劃分其字重(字體的粗細(xì)度)浴讯，那么樣式指定的font-weight屬性值與字體的字重則一一對應(yīng)。并且normal等價于400榆纽，bold等價于700。
但實(shí)際上亮元，我們一般遇到的字體很多時候都是使用一些通用的詞描述劃分其字重唠摹，如下所示奉瘤。
常見的字重數(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ù)量實(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表示其字重值是基于從其父元素繼承而來的字重計(jì)算所得的，與normal楼肪、bold所代表的字重并無關(guān)系惹悄。
其值通常是根據(jù)下表計(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ī)則。
理解與運(yùn)用
下面我們通過官方例子和實(shí)際測試來好好理解這個匹配算法規(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)匹配好了（說起來有點(diǎn)拗口走敌，大家可以根據(jù)Figure.16的例子體會下）掉丽。
其余的，我就不多解釋了捶障，大家可以根據(jù)結(jié)果檢查自己是否理解到位残邀。
總結(jié)
根據(jù)以上的研究柑蛇，可以總結(jié)出三點(diǎn):
1、通常情況下空免，一個特定的字體僅會包含少數(shù)的可用字重盆耽。若所指定的字重不存在直接匹配扼菠，則會通過字體匹配算法規(guī)則匹配使用鄰近的可用字重坝咐。這也就是為什么我們有時候使用特定字重時沒有“生效”，看起來跟其它字重差不多的原因所在秧饮。
2泽篮、在實(shí)際中，最為常用的字重是normal和bold泼各。我個人認(rèn)為400亏拉、700是等效于normal、bold的弱贼，無論哪一種表示方法都沒有關(guān)系磷蛹，主要是個人習(xí)慣問題。
3庇勃、但是槽驶，推薦使用數(shù)值替代lighter、bolder罕拂，因?yàn)檫@涉及到繼承計(jì)算的問題全陨，用數(shù)值的話則會更為清晰明了。
本?文轉(zhuǎn)載自：凹凸實(shí)驗(yàn)室
