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

之前寫過一篇關於Web字型簡介及使用技巧的文章：

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

該篇文章基本沒有太多移動端的字型選擇及分析。並且過了這麼久，如今的 Web 字型又有了一些新的東西，遂有此文。

正文從這裡開始。

各大網站最新 font-family

作為前端的一個習慣，瀏覽各個網站的時候總是喜歡開啟開發者工具時不時審查元素一下。看了一下一些比較出名的網站移動端的 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 中幾乎見不到的字型定義如今已經很普遍了。它們是什麼呢？是一種特定的字型嗎？

字型基礎知識

在繼續之前，我們先簡單回顧關於字型的一些基礎知識。

襯線字型與無襯線字型

就 Web 常用的一些字型而言，其實大體上分為襯線字型和無襯線字型。

襯線字型 -- 關鍵字為 serif，意為有襯線的字型，襯線的意思是在字元筆畫末端有叫做襯線的小細節的額外裝飾，而且筆畫的粗細會有所不同，這些細節在大寫字母中特別明顯。

無襯線字型 -- 關鍵字為 sans-serif，也就是無襯線的意思。專指西文中沒有襯線的字型，與漢字字型中的黑體相對應。與襯線字型相反，該類字型通常是機械的和統一線條的，它們往往擁有相同的曲率，筆直的線條，銳利的轉角。

中文下，無襯線字型就是黑體，黑體字也就是又稱方體或等線體，沒有襯線裝飾，字形端莊，筆畫橫平豎直，筆跡全部一樣粗細。

對比著來看：

關於字型的基礎知識，建議先看看這篇 你該知道的字型 font-family^[5]

font-family 關鍵字

對於 CSS 中的 font-family 而言，它有兩類取值。

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

2. 一類是通用字型族名，它表示一大類字型（並非單個），類似這樣：font-family: sans-serif 。

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

關於通用字型族名，在 CSS Fonts Module Level 3 -- Basic Font Properties^[6] 中，定義了 5 個，也就是我們熟知的幾個通用字型族名：

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

新增通用字型族關鍵字

而在  CSS Fonts Module Level 4 -- Generic font families^[7] 中，新增了幾個關鍵字：

• system-ui 系統預設字型
• emoji 用於相容 emoji 表情符號字元
• math 適用於數學表示式
• fangsong 此字體系列用於中文的（仿宋）字型。

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

system-ui

簡單而言，font-family: system-ui 的目的就是在不同的作業系統的 Web 頁面下，自動選擇本作業系統下的預設系統字型。

預設使用特定作業系統的系統字型可以提高效能，因為瀏覽器或者 webview 不必去下載任何字型檔案，而是使用已有的字型檔案。font-family: system-ui 字型設定的優勢之處在於它與當前作業系統使用的字型相匹配，對於文字內容而言，它可以得到最恰當的展示。

San Francisco Fonts

OK，簡單瞭解了 system-ui 字型族。但是像 -apple-system、BlinkMacSystemFont 沒有在最新的標準裡出現。它們又代表什麼意思呢？

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

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

San Francisco Fonts 在 iOS 系統上用於替代升級另外一款西文字型 Helvetica Neue。Apple 做了一些重要的改變，使其成為平臺上更好的， 甚至是完美的西文字型。

-apple-system/BlinkMacSystemFont

話說回來。正如每個前端開發人員都知道的那樣，將一個功能納入規範是一回事，將其納入瀏覽器又是另一回事。

幸運的是，system-ui 的普及很快。Chrome 和 Safari 都可以在各種平臺上完全支援它。只有 Mozilla 和 Windows 相對落後。

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

仔細看上圖的最後兩行：

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

考慮到不同平臺及向後相容，在 macOS 和 iOS 上，我們需要使用 -apple-system 及 BlinkMacSystemFont 來相容適配 system-ui 標準。

Segoe UI

Segoe UI 是 Windows 從 Vista 開始的預設西文字型族，只有西文，不支援漢字，屬於無襯線體。

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

Roboto

Roboto 是為 Android 作業系統設計的一個無襯線字型家族。Google 描述該字型為“現代的、但平易近人”和“有感情”的。

這個字型家族包含Thin、Light、Regular、Medium、Bold、Black六種粗細及相配的斜體。

網站字型定義推薦寫法

到此，我們可以總結一下了。以 CSS-Tricks^[9] 網站的 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，使用各個支援平臺上的預設系統字型
2. ``-apple-system`， 在一些稍低版本 Mac OS X 和 iOS 上，它針對舊版上的 Neue Helvetica 和 Lucida Grande 字型，升級使用更為合適的 San Francisco Fonts
3. BlinkMacSystemFont，針對一些 Mac OS X 上的 Chrome 瀏覽器，使用系統預設字型
4. segoe ui，在 Windows 及 Windows Phone 上選取系統預設字型
5. Roboto，面向 Android 和一些新版的的 Chrome OS
6. Helvetica,Arial，在針對不同作業系統不同平臺設定採用預設系統字型後，針對一些低版本瀏覽器的降級方案
7. sans-serif，兜底方案，保證字型風格統一，至少也得是無襯線字型

上述 5 個字型族定義，優先順序由高到底，可以看到，它們 5 個都並非某個特定字型，基本的核心思想都是選擇對應平臺上的預設系統字型。

涵蓋了 iOS、MAC OS X、Android、Windows、Windows Phone 基本所有使用者經常使用的主流作業系統。

使用系統預設字型的主要原因是效能。字型通常是網站上載入的最大/最重的資源之一。如果我們可以使用使用者機器上已有的字型，我們就完全不需要再去獲取字型資源，從而使載入時間明顯加快。

並且系統字型的優點在於它與當前作業系統使用的相匹配，因此它的文字展示必然也是一個讓人舒適展示效果。

當然，上述 font-family 的定義不一定是最佳的。譬如天貓在最前面添加了 "PingFang SC",miui,..必定也有他們的業務上的考慮。但是一些 fallback 方案向後相容的思想都是一致的，值得參考學習。

字型定義規則建議

結合 你該知道的字型 font-family^[10] 最後給出的規則建議，加上本文對各系統預設字型的介紹及最新的字型定義推薦，給出現階段字型定義規則的建議如下：

1、儘量使用系統預設字型

使用系統預設字型的主要原因是效能，並且系統字型的優點在於它與當前作業系統使用的相匹配，因此它的文字展示必然也是一個讓人舒適展示效果。

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

中文或者西文（英文）都要考慮到。由於大部分中文字型也是帶有英文部分的，但是英文部分又不怎麼好看，但是英文字型中大多不包含中文。通常會先進行英文字型的宣告，選擇最優的英文字型，這樣不會影響到中文字型的選擇，中文字型宣告則緊隨其次。

3、兼顧多作業系統

選擇字型的時候要考慮多作業系統。例如 MAC OS 下的很多中文字型在 Windows 都沒有預裝，為了保證 MAC 使用者的體驗，在定義中文字型的時候，先定義 MAC 使用者的中文字型，再定義 Windows 使用者的中文字型；

4、兼顧舊作業系統，以字型族系列 serif 和 sans-serif 結尾

當使用一些非常新的字型時，要考慮向下相容，兼顧到一些極舊的作業系統，使用字型族系列 serif 和 sans-serif 結尾總歸是不錯的選擇。

最後

還有一些對字型細節深入討論的，感興趣的可以看看下面幾篇文章：

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

好了，本文到此結束，希望對你有幫助 :)

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS^[14] ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

參考資料

回覆“加群”與大佬們一起交流學習~

點選“閱讀原文”檢視 100+ 篇原創文章