Web 字體 font-family 再探祕

以前寫過一篇關於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 而言，它有兩類取值。

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

2. 一類是通用字體族名，它是一種備選機制，用於在指定的字體不可用時給出較好的字體，相似這樣：font-family: sans-serif 。

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

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

1. serif 襯線字體族
2. sans-serif 非襯線字體族
3. monospace 等寬字體，即字體中每一個字寬度相同
4. cursive 草書字體
5. 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;
}
複製代碼

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 方案向後兼容的思想都是一致的，值得參考學習。

最後

還有一些對字體細節深刻討論的，感興趣的能夠看看下面幾篇文章：

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

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

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

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