Web 字體 font-family 再探秘

  • 2019 年 10 月 3 日
  • 筆記

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

該篇文章基本沒有太多移動端的字體選擇及分析。並且過了這麼久，如今的 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，意為有襯線的字體，襯線的意思是在字元筆畫末端有叫做襯線的小細節的額外裝飾，而且筆畫的粗細會有所不同，這些細節在大寫字母中特別明顯。

image

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

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

image

關於字體的基礎知識，建議先看看這篇 你該知道的字體 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 做了一些重要的改變，使其成為平台上更好的， 甚至是完美的西文字體。

image

  

-apple-system/BlinkMacSystemFont

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

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

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

image

仔細看上圖的最後兩行：

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

 

最後

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

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

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

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

VirMach 便宜 VPS

QNews

QNews