解決 font-weight 無效的問題

近期調頁面時有幾個 font-weight 須要修改，不管怎麼調整字體粗細都沒有變化，深刻研究後總結下文

初探

本地寫個例子，代碼以下

<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 結果分別以下(從左到右)

個人瀏覽器均爲最新版本，發現一個簡單的 font-weight 屬性，在三個瀏覽器有三個表現。

• Chrome 下全部字重均同樣
• Firefox 下表現正常，是咱們期待的結果
• Safari 下 100 無效，被解析爲 normal

解決表現不一致的問題

這種不一樣瀏覽器表現不一樣是咱們不能接受的，對於後期排錯形成困難，因而我首先想到是字體的惹得貨，修改個人樣式文件

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

效果以下

這裏的表現卻是同樣的，咱們能夠忽略圖中字體大小（截屏的偏差致使），只看字體粗細就好，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。

這也很好的解釋了這個例子的表象，但我瞬間推翻了這句話，由於在例子1中 Firefox 在沒有設置字體的狀況下能夠正常顯示。

問題根源

到這裏相信你已經知道答案了，咱們要針對不一樣瀏覽器和運行環境進行全面配置 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;
}

看下三個瀏覽器的表現

在字體和字重上達到了徹底一致，仔細的觀察會發現，Chrome 與 Safari 渲染不一樣字重的字體總寬度變化明顯，而 Firefox 下則不是十分明顯

舒適提示：儘可能不要用字體去撐容器的寬度，儘可能避免 hover 改變字重。由於不一樣環境下渲染的差別會致使表現不一致。

上面給的一大串字體又表明兼容那些環境和設備哪？

首先咱們分紅三組來解釋

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

1.第一個分組是映射到系統 UI 字體的 CSS 屬性。這涵蓋了不少環境，而且不會將這些字體誤認爲別的字體

• -apple-system 在 Mac OS X 和 iOS 上的 Safari 中設置 San Francisco，並在舊版本的 Mac OS X 上設置成 Neue Helvetica 和 Lucida Grande。它根據字體大小正確選擇 San Francisco Text 和 San Francisco Display。
• BlinkMacSystemFont 只針對於 Mac OS X 上的 Chrome。

2.第二個分組用於已知的系統 UI 字體

• Segoe UI 針對 Windows 和 Windows Phone。
• Roboto 針對 Android 和更高版本的 Chrome 操做系統。故意列出在 Segoe UI 後，由於若是你是 Windows 上的 Android 開發人員，並安裝 Roboto，將使用 Segoe UI。
• Oxygen 針對 KDE，Ubuntu，你能夠猜到，Cantarell 針對 GNOME。這一開始感到徒勞，由於一些 Linux 發行版有許多這樣的字體。
• Fira Sans 針對 Firefox OS 系統。
• Droid Sans 針對舊版本系統的安卓

請注意，咱們不須要添加 San Francisco。在 iOS 和 Mac OS X 上，San Francisco 並非顯而易見的，而是做爲「隱藏」字體存在。咱們也不使用 .SFNSText-Regular，在 Mac OS X 上的 San Francisco 的內部 PostScript 名稱來指定 San Francisco。它只適用於 Chrome，而且不如 BlinkMacSystemFont 通用。

3.第三個分組是咱們的後備字體

• Helvetica Neue 針對舊 El Capitan 版本的 Mac OS X。它被列在接近結尾，由於它是一個流行的字體在其餘非 El Capitan 計算機上。
• sans-serif 默認的是 sans-serif 後備字體。

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

1. 在 Mac OS X 的 Firefox 中，San Francisco 的字母間距比 Safari 和 Chrome 更緊。
2. 它不會使 Lucida Grande 在 Mac OS X 的 pre-Yosemite 版本上降級到 Neue Helvetica。而且它可能不匹配不太受歡迎的操做系統上的正確字體或更復雜的配置。

說到這裏上面都是英文的字體，咱們須要針對中文設置字體，能夠針對不一樣操做系統給中文字體。

總結

對於字體的統一展現，目前爲止尚未完善的解決辦法，只能針對不一樣設備給出對應的解決方案，至於爲何不引入外部的三方字庫來統一字體呢？由於會增長網頁的請求時長，渲染也會耗時，儘可能避免三方字庫。下次再有相似字重渲染偏差問題能夠先從字體下手，整個例子沒有跑過 Windows 系統，可能在 Windows 下還會有問題。至少切入點有了改變，並非 Chrome 下 font-weight 無效。

文章出自 orange 的 我的博客 http://orangexc.xyz/