Web 字型 font-family 再探祕

阿新 • • 發佈：2019-08-14

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

你該知道的字型 font-family。

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

正文從這裡開始。

各大網站最新 font-family

作為前端的一個習慣，瀏覽各個網站的時候總是喜歡開啟開發者工具時不時審查元素一下。看了一下一些比較出名的網站移動端的 font-family：

天貓：font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
Github：font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
CSS-Tricks：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

font-family 關鍵字

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

一類是類似這樣的具體的字型族名定義：font-family: Arial 這裡定義了一個具體的字型樣式，字型族名為 Arial;
一類是通用字型族名，它是一種備選機制，用於在指定的字型不可用時給出較好的字型，類似這樣：font-family: sans-serif 。

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

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

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

新增通用字型族關鍵字

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

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(圖片擷取日 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 網站的 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;
}

system-ui，使用各個支援平臺上的預設系統字型
-apple-system，在一些稍低版本 Mac OS X 和 iOS 上，它針對舊版上的 Neue Helvetica 和 Lucida Grande 字型，升級使用更為合適的 San Francisco Fonts
BlinkMacSystemFont，針對一些 Mac OS X 上的 Chrome 瀏覽器，使用系統預設字型
segoe ui，在 Windows 及 Windows Phone 上選取系統預設字型
Roboto，面向 Android 和一些新版的的 Chrome OS
Helvetica,Arial，在針對不同作業系統不同平臺設定採用預設系統字型後，針對一些低版本瀏覽器的降級方案
sans-serif，兜底方案，保證字型風格統一，至少也得是無襯線字型

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

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

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

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

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

最後

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

Using UI System Fonts In Web Design: A Quick Practical Guide
System Fonts in CSS
Apple’s San Francisco Font

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

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

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

Web 字型 font-family 再探祕

各大網站最新 font-family