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

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

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

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

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

直接提供方案：

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：

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

2、"Segoe UI", Roboto, Ubuntu：

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

3、Helvetica Neue,Helvetica,Arial：

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

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

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

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

中文字體的第二梯隊(duì)：
"Microsoft YaHei UI" 即微軟雅黑 UI ，隨 Windows 8.1 一同發(fā)布，相較于微軟雅黑，其對(duì)英文、數(shù)字的筆畫(huà)做了一定修改；
"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，無(wú)襯線體，與中文字體的黑體相對(duì)應(yīng)。

思路是什么？

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

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

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

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

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

2. 寫(xiě)得越多就一定越好嗎？

回過(guò)頭看知乎的 font-family ：

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

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

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

3. 對(duì)于設(shè)計(jì)團(tuán)隊(duì)的意義是什么？

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

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