設(shè)置三個(gè)段落的字體的粗細(xì)：

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
定義和用法
font-weight 屬性設(shè)置文本的粗細(xì)。
說明
該屬性用于設(shè)置顯示元素的文本中所用的字體加粗。數(shù)字值 400 相當(dāng)于 關(guān)鍵字 normal，700 等價(jià)于 bold。每個(gè)數(shù)字值對(duì)應(yīng)的字體加粗必須至少與下一個(gè)最小數(shù)字一樣細(xì)，而且至少與下一個(gè)最大數(shù)字一樣粗。

解決 font-weight 無效的問題

近期調(diào)頁面時(shí)有幾個(gè) font-weight 需要修改，無論怎么調(diào)整字體粗細(xì)都沒有變化，深入研究后總結(jié)下文

初探

本地寫個(gè)例子，代碼如下

<p class="thin">This is a paragraph</p>
<p class="normal">This is a paragraph</p>
<p class="thick">This is a paragraph</p>

p {
  font-size: 50px;
}
p.thin {
  font-weight: 100;
}
p.normal {
  font-weight: normal;
}
p.thick {
  font-weight: bold;
}

在 Mac OS 下 Chrome、Firefox、Safari 結(jié)果分別如下(從左到右)

我的瀏覽器均為最新版本，發(fā)現(xiàn)一個(gè)簡(jiǎn)單的 font-weight 屬性，在三個(gè)瀏覽器有三個(gè)表現(xiàn)。

• Chrome 下所有字重均一樣

• Firefox 下表現(xiàn)正常，是我們期待的結(jié)果

• Safari 下 100 無效，被解析為 normal

解決表現(xiàn)不一致的問題

這種不同瀏覽器表現(xiàn)不同是我們不能接受的，對(duì)于后期排錯(cuò)造成困難，于是我首先想到是字體的惹得貨，修改我的樣式文件

p {
  font-size: 50px;
  font-family: Arial;
}
p.thin {
  font-weight: 100;
}
p.normal {
  font-weight: normal;
}
p.thick {
  font-weight: bold;
}

效果如下

 

這里的表現(xiàn)倒是一樣的，我們可以忽略圖中字體大?。ń仄恋恼`差導(dǎo)致），只看字體粗細(xì)就好，font-weight: 100; 都失效了。

MDN 文檔的解釋

This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

文章開始沒有介紹基本語法，相信前端們都知道，normal 等同于 400， bold 等同于 700。

這也很好的解釋了這個(gè)例子的表象，但我瞬間推翻了這句話，因?yàn)樵诶?中 Firefox 在沒有設(shè)置字體的情況下可以正常顯示。

問題根源

到這里相信你已經(jīng)知道答案了，我們要針對(duì)不同瀏覽器和運(yùn)行環(huán)境進(jìn)行全面配置 font-family 屬性，全局的字體建議放在 body 選擇器下。

p {
  font-size: 50px;
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}
p.thin {
  font-weight: 100;
}
p.normal {
  font-weight: normal;
}
p.thick {
  font-weight: bold;
}

看下三個(gè)瀏覽器的表現(xiàn)


 

在字體和字重上達(dá)到了完全一致，仔細(xì)的觀察會(huì)發(fā)現(xiàn)，Chrome 與 Safari 渲染不同字重的字體總寬度變化明顯，而 Firefox 下則不是十分明顯

溫馨提示：盡量不要用字體去撐容器的寬度，盡量避免 hover 改變字重。因?yàn)椴煌h(huán)境下渲染的差異會(huì)導(dǎo)致表現(xiàn)不一致。

上面給的一大串字體又代表兼容那些環(huán)境和設(shè)備哪？

首先我們分成三組來解釋

font-family:
/* 1 */ -apple-system, BlinkMacSystemFont,
/* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
/* 3 */ "Helvetica Neue", sans-serif;

1.第一個(gè)分組是映射到系統(tǒng) UI 字體的 CSS 屬性。這涵蓋了很多環(huán)境，并且不會(huì)將這些字體誤認(rèn)為別的字體

• -apple-system 在 Mac OS X 和 iOS 上的 Safari 中設(shè)置 San Francisco，并在舊版本的 Mac OS X 上設(shè)置成 Neue Helvetica 和 Lucida Grande。它根據(jù)字體大小正確選擇 San Francisco Text 和 San Francisco Display。

• BlinkMacSystemFont 只針對(duì)于 Mac OS X 上的 Chrome。

2.第二個(gè)分組用于已知的系統(tǒng) UI 字體

• Segoe UI 針對(duì) Windows 和 Windows Phone。

• Roboto 針對(duì) Android 和更高版本的 Chrome 操作系統(tǒng)。故意列出在 Segoe UI 后，因?yàn)槿绻闶?Windows 上的 Android 開發(fā)人員，并安裝 Roboto，將使用 Segoe UI。

• Oxygen 針對(duì) KDE，Ubuntu，你可以猜到，Cantarell 針對(duì) GNOME。這一開始感到徒勞，因?yàn)橐恍?Linux 發(fā)行版有許多這樣的字體。

• Fira Sans 針對(duì) Firefox OS 系統(tǒng)。

• Droid Sans 針對(duì)舊版本系統(tǒng)的安卓

請(qǐng)注意，我們不需要添加 San Francisco。在 iOS 和 Mac OS X 上，San Francisco 并不是顯而易見的，而是作為“隱藏”字體存在。我們也不使用 .SFNSText-Regular，在 Mac OS X 上的 San Francisco 的內(nèi)部 PostScript 名稱來指定 San Francisco。它只適用于 Chrome，并且不如 BlinkMacSystemFont 通用。

3.第三個(gè)分組是我們的后備字體

• Helvetica Neue 針對(duì)舊 El Capitan 版本的 Mac OS X。它被列在接近結(jié)尾，因?yàn)樗且粋€(gè)流行的字體在其他非 El Capitan 計(jì)算機(jī)上。

• sans-serif 默認(rèn)的是 sans-serif 后備字體。

以下是目前已知的的問題：

1. 在 Mac OS X 的 Firefox 中，San Francisco 的字母間距比 Safari 和 Chrome 更緊。

2. 它不會(huì)使 Lucida Grande 在 Mac OS X 的 pre-Yosemite 版本上降級(jí)到 Neue Helvetica。并且它可能不匹配不太受歡迎的操作系統(tǒng)上的正確字體或更復(fù)雜的配置。

說到這里上面都是英文的字體，我們需要針對(duì)中文設(shè)置字體，可以針對(duì)不同操作系統(tǒng)給中文字體。

總結(jié)

對(duì)于字體的統(tǒng)一展示，目前為止還沒有完善的解決辦法，只能針對(duì)不同設(shè)備給出對(duì)應(yīng)的解決方案，至于為什么不引入外部的三方字庫來統(tǒng)一字體呢？因?yàn)闀?huì)增加網(wǎng)頁的請(qǐng)求時(shí)長，渲染也會(huì)耗時(shí)，盡量避免三方字庫。下次再有類似字重渲染誤差問題可以先從字體下手，整個(gè)例子沒有跑過 Windows 系統(tǒng)，可能在 Windows 下還會(huì)有問題。至少切入點(diǎn)有了改變，并不是 Chrome 下 font-weight 無效。

• css