【CSS】886- 你該知道的字體 font-family

之前寫過(guò)一篇關(guān)于Web字體簡(jiǎn)介及使用技巧的文章：

• 你該知道的字體 font-family^[1]。

該篇文章基本沒(méi)有太多移動(dòng)端的字體選擇及分析。并且過(guò)了這么久，如今的 Web 字體又有了一些新的東西，遂有此文。

正文從這里開(kāi)始。

各大網(wǎng)站最新 font-family

作為前端的一個(gè)習(xí)慣，瀏覽各個(gè)網(wǎng)站的時(shí)候總是喜歡打開(kāi)開(kāi)發(fā)者工具時(shí)不時(shí)審查元素一下?？戳艘幌乱恍┍容^出名的網(wǎng)站移動(dòng)端的 font-family：

• 天貓^[2]：font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
• Github^[3]：font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
• CSS-Tricks^[4]：font-family: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;

很有意思的是，類似 system-ui，-apple-system，BlinkMacSystemFont 等等早幾年在 font-family 中幾乎見(jiàn)不到的字體定義如今已經(jīng)很普遍了。它們是什么呢？是一種特定的字體嗎？

字體基礎(chǔ)知識(shí)

在繼續(xù)之前，我們先簡(jiǎn)單回顧關(guān)于字體的一些基礎(chǔ)知識(shí)。

襯線字體與無(wú)襯線字體

就 Web 常用的一些字體而言，其實(shí)大體上分為襯線字體和無(wú)襯線字體。

襯線字體 -- 關(guān)鍵字為 serif，意為有襯線的字體，襯線的意思是在字符筆畫末端有叫做襯線的小細(xì)節(jié)的額外裝飾，而且筆畫的粗細(xì)會(huì)有所不同，這些細(xì)節(jié)在大寫字母中特別明顯。

無(wú)襯線字體 -- 關(guān)鍵字為 sans-serif，也就是無(wú)襯線的意思。專指西文中沒(méi)有襯線的字體，與漢字字體中的黑體相對(duì)應(yīng)。與襯線字體相反，該類字體通常是機(jī)械的和統(tǒng)一線條的，它們往往擁有相同的曲率，筆直的線條，銳利的轉(zhuǎn)角。

中文下，無(wú)襯線字體就是黑體，黑體字也就是又稱方體或等線體，沒(méi)有襯線裝飾，字形端莊，筆畫橫平豎直，筆跡全部一樣粗細(xì)。

對(duì)比著來(lái)看：

關(guān)于字體的基礎(chǔ)知識(shí)，建議先看看這篇 你該知道的字體 font-family^[5]

font-family 關(guān)鍵字

對(duì)于 CSS 中的 font-family 而言，它有兩類取值。

1. 一類是類似這樣的具體的字體族名定義：font-family: Arial 這里定義了一個(gè)具體的字體樣式，字體族名為 Arial;

2. 一類是通用字體族名，它表示一大類字體（并非單個(gè)），類似這樣：font-family: sans-serif 。

其中，sans-serif 表無(wú)襯線字體族，例如， "Open Sans", "Arial" "微軟雅黑" 等等。

關(guān)于通用字體族名，在 CSS Fonts Module Level 3 -- Basic Font Properties^[6] 中，定義了 5 個(gè)，也就是我們熟知的幾個(gè)通用字體族名：

1. serif 襯線字體族
2. sans-serif 非襯線字體族
3. monospace 等寬字體，即字體中每個(gè)字寬度相同
4. cursive 草書字體
5. fantasy 主要是那些具有特殊藝術(shù)效果的字體

新增通用字體族關(guān)鍵字

而在  CSS Fonts Module Level 4 -- Generic font families^[7] 中，新增了幾個(gè)關(guān)鍵字：

• system-ui 系統(tǒng)默認(rèn)字體
• emoji 用于兼容 emoji 表情符號(hào)字符
• math 適用于數(shù)學(xué)表達(dá)式
• fangsong 此字體系列用于中文的（仿宋）字體。

我們看看用的最多的 system-ui。

system-ui

簡(jiǎn)單而言，font-family: system-ui 的目的就是在不同的操作系統(tǒng)的 Web 頁(yè)面下，自動(dòng)選擇本操作系統(tǒng)下的默認(rèn)系統(tǒng)字體。

默認(rèn)使用特定操作系統(tǒng)的系統(tǒng)字體可以提高性能，因?yàn)闉g覽器或者 webview 不必去下載任何字體文件，而是使用已有的字體文件。font-family: system-ui 字體設(shè)置的優(yōu)勢(shì)之處在于它與當(dāng)前操作系統(tǒng)使用的字體相匹配，對(duì)于文本內(nèi)容而言，它可以得到最恰當(dāng)?shù)恼故尽?/p>

San Francisco Fonts

OK，簡(jiǎn)單了解了 system-ui 字體族。但是像 -apple-system、BlinkMacSystemFont 沒(méi)有在最新的標(biāo)準(zhǔn)里出現(xiàn)。它們又代表什么意思呢？

在此之前，先了解下 San Francisco Fonts 。

San Francisco Fonts 又叫舊金山字體，是一款西文字體。隨著 iOS 9 更新面世，在 WatchOS 中隨 Apple Watch 一起悄然發(fā)售，并且還將在 Apple TV 上的新 tvOS 中使用。

San Francisco Fonts 在 iOS 系統(tǒng)上用于替代升級(jí)另外一款西文字體 Helvetica Neue。Apple 做了一些重要的改變，使其成為平臺(tái)上更好的， 甚至是完美的西文字體。

-apple-system/BlinkMacSystemFont

話說(shuō)回來(lái)。正如每個(gè)前端開(kāi)發(fā)人員都知道的那樣，將一個(gè)功能納入規(guī)范是一回事，將其納入瀏覽器又是另一回事。

幸運(yùn)的是，system-ui 的普及很快。Chrome 和 Safari 都可以在各種平臺(tái)上完全支持它。只有 Mozilla 和 Windows 相對(duì)落后。

看看 system-ui 的兼容性，Can i Use -- system-ui^[8](圖片截取日 2019-08-13)：

仔細(xì)看上圖的最后兩行：

• Supported as the -apple-system value (only on macOS and iOS)
• Supported as the BlinkMacSystemFont value (only on macOS)

考慮到不同平臺(tái)及向后兼容，在 macOS 和 iOS 上，我們需要使用 -apple-system 及 BlinkMacSystemFont 來(lái)兼容適配 system-ui 標(biāo)準(zhǔn)。

Segoe UI

Segoe UI 是 Windows 從 Vista 開(kāi)始的默認(rèn)西文字體族，只有西文，不支持漢字，屬于無(wú)襯線體。

它也表示一個(gè)系列而不是某一款單一字體。使用 font-family: Segoe UI 可以在 Windows 平臺(tái)及 Windows Phone 上選取最佳的西文字體展示。

Roboto

Roboto 是為 Android 操作系統(tǒng)設(shè)計(jì)的一個(gè)無(wú)襯線字體家族。Google 描述該字體為“現(xiàn)代的、但平易近人”和“有感情”的。

這個(gè)字體家族包含Thin、Light、Regular、Medium、Bold、Black六種粗細(xì)及相配的斜體。

網(wǎng)站字體定義推薦寫法

到此，我們可以總結(jié)一下了。以 CSS-Tricks^[9] 網(wǎng)站的 font-family 定義為例子：

{
  font-family: 
    system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
    Helvetica,Arial,
    sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}

1. system-ui，使用各個(gè)支持平臺(tái)上的默認(rèn)系統(tǒng)字體
2. ``-apple-system`， 在一些稍低版本 Mac OS X 和 iOS 上，它針對(duì)舊版上的 Neue Helvetica 和 Lucida Grande 字體，升級(jí)使用更為合適的 San Francisco Fonts
3. BlinkMacSystemFont，針對(duì)一些 Mac OS X 上的 Chrome 瀏覽器，使用系統(tǒng)默認(rèn)字體
4. segoe ui，在 Windows 及 Windows Phone 上選取系統(tǒng)默認(rèn)字體
5. Roboto，面向 Android 和一些新版的的 Chrome OS
6. Helvetica,Arial，在針對(duì)不同操作系統(tǒng)不同平臺(tái)設(shè)定采用默認(rèn)系統(tǒng)字體后，針對(duì)一些低版本瀏覽器的降級(jí)方案
7. sans-serif，兜底方案，保證字體風(fēng)格統(tǒng)一，至少也得是無(wú)襯線字體

上述 5 個(gè)字體族定義，優(yōu)先級(jí)由高到底，可以看到，它們 5 個(gè)都并非某個(gè)特定字體，基本的核心思想都是選擇對(duì)應(yīng)平臺(tái)上的默認(rèn)系統(tǒng)字體。

涵蓋了 iOS、MAC OS X、Android、Windows、Windows Phone 基本所有用戶經(jīng)常使用的主流操作系統(tǒng)。

使用系統(tǒng)默認(rèn)字體的主要原因是性能。字體通常是網(wǎng)站上加載的最大/最重的資源之一。如果我們可以使用用戶機(jī)器上已有的字體，我們就完全不需要再去獲取字體資源，從而使加載時(shí)間明顯加快。

并且系統(tǒng)字體的優(yōu)點(diǎn)在于它與當(dāng)前操作系統(tǒng)使用的相匹配，因此它的文本展示必然也是一個(gè)讓人舒適展示效果。

當(dāng)然，上述 font-family 的定義不一定是最佳的。譬如天貓?jiān)谧钋懊嫣砑恿?"PingFang SC",miui,..必定也有他們的業(yè)務(wù)上的考慮。但是一些 fallback 方案向后兼容的思想都是一致的，值得參考學(xué)習(xí)。

字體定義規(guī)則建議

結(jié)合 你該知道的字體 font-family^[10] 最后給出的規(guī)則建議，加上本文對(duì)各系統(tǒng)默認(rèn)字體的介紹及最新的字體定義推薦，給出現(xiàn)階段字體定義規(guī)則的建議如下：

1、盡量使用系統(tǒng)默認(rèn)字體

使用系統(tǒng)默認(rèn)字體的主要原因是性能，并且系統(tǒng)字體的優(yōu)點(diǎn)在于它與當(dāng)前操作系統(tǒng)使用的相匹配，因此它的文本展示必然也是一個(gè)讓人舒適展示效果。

2、兼顧中西，西文在前，中文在后

中文或者西文（英文）都要考慮到。由于大部分中文字體也是帶有英文部分的，但是英文部分又不怎么好看，但是英文字體中大多不包含中文。通常會(huì)先進(jìn)行英文字體的聲明，選擇最優(yōu)的英文字體，這樣不會(huì)影響到中文字體的選擇，中文字體聲明則緊隨其次。

3、兼顧多操作系統(tǒng)

選擇字體的時(shí)候要考慮多操作系統(tǒng)。例如 MAC OS 下的很多中文字體在 Windows 都沒(méi)有預(yù)裝，為了保證 MAC 用戶的體驗(yàn)，在定義中文字體的時(shí)候，先定義 MAC 用戶的中文字體，再定義 Windows 用戶的中文字體；

4、兼顧舊操作系統(tǒng)，以字體族系列 serif 和 sans-serif 結(jié)尾

當(dāng)使用一些非常新的字體時(shí)，要考慮向下兼容，兼顧到一些極舊的操作系統(tǒng)，使用字體族系列 serif 和 sans-serif 結(jié)尾總歸是不錯(cuò)的選擇。

最后

還有一些對(duì)字體細(xì)節(jié)深入討論的，感興趣的可以看看下面幾篇文章：

• Using UI System Fonts In Web Design: A Quick Practical Guide^[11]
• System Fonts in CSS^[12]
• Apple’s San Francisco Font^[13]

好了，本文到此結(jié)束，希望對(duì)你有幫助 :)

更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS^[14] ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

如果還有什么疑問(wèn)或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。

參考資料

回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~

點(diǎn)擊“閱讀原文”查看 100+ 篇原創(chuàng)文章