最標(biāo)準(zhǔn)的系統(tǒng)字體規(guī)范font-family

kk_miles 發(fā)布于2019-08-29 13:43 / 2442人閱讀

摘要：最標(biāo)準(zhǔn)的系統(tǒng)字體規(guī)范注意系統(tǒng)默認(rèn)字體和瀏覽器默認(rèn)字體這個差別。值得一提的是，上默認(rèn)的中文字體渲染是華文黑體，而非作為系統(tǒng)字體的蘋方即冬青黑體，是我們整個中唯一不是系統(tǒng)字體的字體。我們標(biāo)準(zhǔn)化的核心思路是使用系統(tǒng)字體。

最標(biāo)準(zhǔn)的系統(tǒng)字體規(guī)范font-family

注意系統(tǒng)默認(rèn)字體和瀏覽器默認(rèn)字體這個差別。

直接提供方案：

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;

這些都是些什么字體？ 1、-apple-system, BlinkMacSystemFont：

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

2、"Segoe UI", Roboto, Ubuntu：

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

3、Helvetica Neue,Helvetica,Arial：

西文字體的最終 fallback：
"Helvetica Neue"對應(yīng)的是 OS X pre-EI Capitan，實際上它位置靠后的更重要原因是，它在非 EI Capitan 的機器上是一個比較常見的字體；
Helvetica 是世界通用的經(jīng)典無襯線體；
Arial 是 Windows 3.1 開始就一直隨視窗系統(tǒng)分發(fā)的字體，作為最后的回退方案。

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

"PingFang SC" 即蘋方，是 OS X EI Capitan(10.11) 上的系統(tǒng)中文字體。值得一提的是，EI Capitan 上 Chrome 默認(rèn)的中文字體渲染是 ST Heiti(華文黑體)，而非作為系統(tǒng) UI 字體的蘋方；
"Hiragino Sans GB" 即冬青黑體，是我們整個 fallback list 中唯一不是系統(tǒng)字體的字體。加入冬青黑體是因為考慮到無論是在 Mac 還是 Windows 上，冬青黑體的表現(xiàn)都會比微軟雅黑優(yōu)秀。而自 10.6 開始，OS X 就系統(tǒng)自帶了冬青黑體，因此將其置于微軟雅黑之前。

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

中文字體的第二梯隊：
"Microsoft YaHei UI" 即微軟雅黑 UI ，隨 Windows 8.1 一同發(fā)布，相較于微軟雅黑，其對英文、數(shù)字的筆畫做了一定修改；
"Microsoft YaHei" 即微軟雅黑，隨 Windows Vista 一同發(fā)布，是 Vista 至 Windows 8 的系統(tǒng)字體（Windows 8.1 改用 “微軟雅黑 Light”）；
"Source Han Sans CN" 即思源黑體，是大部分 Android 的系統(tǒng)中文字體。

6、sans-serif

中文字體的最終 fallback，無襯線體，與中文字體的黑體相對應(yīng)。

思路是什么？

其實，我們使用系統(tǒng)字體規(guī)范 font-family 的思路很簡單 —— 從西文到中文，分別對各平臺作一個最基礎(chǔ)的降級

一些問題: 1. 不聲明不就是系統(tǒng)字體嗎？

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

我們標(biāo)準(zhǔn)化的核心思路是使用系統(tǒng) UI 字體。

顯式地聲明字體，更重要的是保證頁面樣式的安全與可控。比如，我們?yōu)?Android 聲明英文字體 Roboto 與中文字體思源黑，是因為 Android 機型百(luan)家(cheng)爭(yi)鳴(tuo)。實際上，即使如此，正如我們的測試結(jié)果所示，我們還是不能保證所有 Android 機器都”正確“渲染。因此我們更認(rèn)為這樣有必要。

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

回過頭看知乎的 font-family ：

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

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

而我們考慮到業(yè)務(wù)場景需求，在安全的基礎(chǔ)上，盡量優(yōu)化各平臺的顯示效果。
所以這東西，不能以好與壞來衡量。

3. 對于設(shè)計團隊的意義是什么？

對于設(shè)計師而言：
設(shè)計師了解各平臺的字體分布、了解字體選擇的限制，以及用戶在該平臺的基本體驗；
在實現(xiàn)設(shè)計稿時，能根據(jù)所針對的平臺，調(diào)整設(shè)計稿所用的字體，保持設(shè)計稿字體與用戶所見最終效果的一致。

對于 UI 工程師而言：
保證各項目字體樣式的標(biāo)準(zhǔn)統(tǒng)一；
對字體樣式的調(diào)試有更清楚地把控。