設置三個段落的字體的粗細：

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

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

解決 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 無效。

• css