最標準的系統字體規範font-family

最標準的系統字體規範font-family

注意系統默認字體和瀏覽器默認字體這個差異。

直接提供方案：

font: 14px/1.6 
/*西文*/-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,
/*中文*/PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;

這些都是些什麼字體？

一、-apple-system, BlinkMacSystemFont：

這兩個值是特殊供 iOS 和 macOS(OS X) 使用的屬性值，前者只被 Safari 識別，後者只被 Chrome 識別。也就是說它們是 Webkit 私有屬性，這兩個值強大的地方就在於，其會根據系統版本的不一樣，渲染出不一樣的字體。

二、"Segoe UI", Roboto, Ubuntu：

西文字體的第二梯隊，分別對應了：
"Segoe UI" 對應的是 Windows 和 Windows Phone；
Roboto 對應的是 Google 家的 Android 和 Chrome OS'；
Ubuntu 對應的是 Linux。

三、Helvetica Neue,Helvetica,Arial：

西文字體的最終 fallback：
"Helvetica Neue"對應的是 OS X pre-EI Capitan，實際上它位置靠後的更重要緣由是，它在非 EI Capitan 的機器上是一個比較常見的字體；
Helvetica 是世界通用的經典無襯線體；
Arial 是 Windows 3.1 開始就一直隨視窗系統分發的字體，做爲最後的回退方案。

四、"PingFang SC", "Hiragino Sans GB"：

"PingFang SC" 即蘋方，是 OS X EI Capitan(10.11) 上 的系統中文字體。值得一提的是，EI Capitan 上 Chrome 默認的中文字體渲染是 ST Heiti(華文黑體)，而非做爲系統 UI 字體的蘋方；
"Hiragino Sans GB" 即冬青黑體，是咱們整個 fallback list 中惟一不是系統字體的字體。加入冬青黑體是由於考慮到不管是在 Mac 仍是 Windows 上，冬青黑體的表現都會比微軟雅黑優秀。而自 10.6 開始，OS X 就 系統自帶 了冬青黑體，所以將其置於微軟雅黑以前。

五、"Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN"

中文字體的第二梯隊：
"Microsoft YaHei UI" 即 微軟雅黑 UI ，隨 Windows 8.1 一同發佈，相較於微軟雅黑，其對英文、數字的筆畫作了必定修改；
"Microsoft YaHei" 即微軟雅黑，隨 Windows Vista 一同發佈，是 Vista 至 Windows 8 的系統字體（Windows 8.1 改用 「微軟雅黑 Light」）；
"Source Han Sans CN" 即思源黑體，是大部分 Android 的系統中文字體。

六、sans-serif

中文字體的最終 fallback，無襯線體，與中文字體的黑體相對應。

思路是什麼？

其實，咱們使用系統字體規範 font-family 的思路很簡單 —— 從西文到中文，分別對各平臺做一個最基礎的降級

一些問題:

1. 不聲明不就是系統字體嗎？

不聲明字體時，瀏覽器渲染的是 默認字體，不必定是 系統字體。好比 macOS ，Chrome 默認渲染華文黑體（ST Heiti），而非系統字體 蘋方（PingFang SC）；Windows 7，瀏覽器默認渲染中易宋體（Simsun），而非系統字體微軟雅黑（Microsoft YaHei）。

咱們標準化的核心思路是使用系統 UI 字體。

顯式地聲明字體，更重要的是 保證頁面樣式的安全與可控。好比，咱們爲 Android 聲明英文字體 Roboto 與中文字體思源黑，是由於 Android 機型百(luan)家(cheng)爭(yi)鳴(tuo)。實際上，即便如此，正如咱們的測試結果所示，咱們仍是不能保證全部 Android 機器都」正確「渲染。所以咱們更認爲這樣有必要。

2. 寫得越多就必定越好嗎？

回過頭看知乎的 font-family ：

font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

寫得越多顯得越專業嗎？恐怕不是的。也許正是由於專業、通過了思考，知乎纔對字體作了刪除、中文字體只作了最基本的 sans-serif 限制。即便在 Windows 7 上，這套 font-family 的渲染是 Arial 和 中易宋體（Simsun），即便在 macOS 上英文字體也沒有使用最新的 San Francisco，不過 它真的足夠安全。

而咱們考慮到業務場景需求，在安全的基礎上，儘可能優化各平臺的顯示效果。
因此這東西，不能以好與壞來衡量。

3. 對於設計團隊的意義是什麼？

對於設計師而言：
設計師瞭解各平臺的字體分佈、瞭解字體選擇的限制，以及用戶在該平臺的基本體驗；
在實現設計稿時，能根據所針對的平臺，調整設計稿所用的字體，保持設計稿字體與用戶所見最終效果的一致。

對於 UI 工程師而言： 保證各項目字體樣式的標準統一； 對字體樣式的調試有更清楚地把控。