之前寫過一篇關於Web字體簡介及使用技巧的文章：
你該知道的字體font-family[1]。
該篇文章基本沒有太多移動端的字體選擇及分析。並且過了這麼久，如今的 Web 字體又有了一些新的東西，遂有此文。
正文從這裡開始。
各大網站最新font-family
作為前端的一個習慣，瀏覽各個網站的時候總是喜歡打開開發者工具時不時審查元素一下。看了一下一些比較出名的網站移動端的 font-family：
天貓[2]： 'PingFang SC',miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;Github< /span>[3]： CSS-Tricks[4 ]：
很有意思的是，類似system-ui< /code>，-apple-system，BlinkMacSystemFont 等等早幾年在font-family 中幾乎見不到的字體定義如今已經很普遍了。它們是什麼呢？是一種特定的字體嗎？
字體基礎知識
在繼續之前，我們先簡單回顧關於字體的一些基礎知識。
襯線字體與無襯線字體
就Web 常用的一些字體而言，其實大體上分為襯線字體和無襯線字體。
襯線字體 -- 關鍵字為serif，意為有襯線的字體，襯線的意思是在字符筆劃末端有叫做襯線的小細節的額外裝飾，而且筆劃的粗細會有所不同，這些細節在大寫字母中特別明顯。
無襯線字體 -- 關鍵字為 sans-serif，也就是無襯線的意思。專指西文中沒有襯線的字體，與漢字字體中的黑體相對應。與襯線字體相反，該類字體通常是機械的和統一線條的，它們往往擁有相同的曲率，筆直的線條，銳利的轉角。
中文下，無襯線字體就是黑體，黑體字也就是又稱方體或等線體，沒有襯線裝飾，字形端莊，筆劃橫平豎直，筆跡全部一樣粗細。
對比著來看：
關於字體的基礎知識，建議先看看這篇你該知道的字體font-family[5]
font-family 關鍵字
對於CSS 中的font-family 而言，它有兩類取值。
一類是類似這樣的具體的字體族名定義：
一類是通用字體族名，它表示一大類字體（並非單個），類似這樣：
' mdnice編輯器' >其中，sans-serif表無襯線字體族，例如， 'Open Sans', 'Arial' '微軟雅黑' 等等。關於通用字體族名，在CSS Fonts Module Level 3 -- Basic Font Properties[6]< /sup> 中，定義了5 個，也就是我們熟知的幾個通用字體族名：
serif襯線字體族-
sans-serif非襯線字體族 monospace等寬字體，即字體中每個字寬度相同cursive草書字體fantasy主要是那些具有特殊藝術效果的字體
新增通用字體族關鍵字
< p data-tool='mdnice編輯器' >而在 CSS Fonts Module Level 4 -- Generic font families[7] 中，新增了幾個關鍵字：system-ui系統默認字體emoji用於兼容emoji 表情符號字符math適用於數學表達式fangsong此字體系列用於中文的（仿宋）字體。
我們看看用的最多的
system-ui。system-ui
簡單而言，< code >'mdnice編輯器' >默認使用特定操作系統的系統字體可以提高性能，因為瀏覽器或者webview 不必去下載任何字體文件，而是使用已有的字體文件。
'mdnice編輯器' >San Francisco FontsOK，簡單了解了
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]< /sup>(圖片截取日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 開始的默認西文字體族，只有西文，不支持漢字，屬於無襯線體。
它也表示一個系列而不是某一款單一字體。使用
'mdnice編輯器' >RobotoRoboto 是為 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;
}system-ui，使用各個支持平台上的默認系統字體``-apple-system`， 在一些稍低版本Mac OS X 和iOS 上，它針對舊版上的Neue Helvetica 和Lucida Grande 字體，升級使用更為合適的San Francisco Fonts< /section> BlinkMacSystemFont，針對一些Mac OS X 上的Chrome 瀏覽器，使用系統默認字體segoe ui，在Windows 及Windows Phone 上選取系統默認字體Roboto，面向Android 和一些新版的的Chrome OSHelvetica,Arial，在針對不同操作系統不同平台設定採用默認系統字體後，針對一些低版本瀏覽器的降級方案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] < li>
Apple's San Francisco Font[13]
好了，本文到此結束，希望對你有幫助:)
更多精彩CSS 技術文章匯總在我的Github -- iCSS[14] ，持續更新，歡迎點個star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
參考資料
你該知道的字體'outer' label='Powered by 135editor.com' >
回复“加群”與大佬們一起交流學習~
點擊“閱讀原文”查看 100+ 篇原創文章
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/CSS%20886%20The%20font%20you%20should%20know%20fontfamily.html
支付宝扫一扫 
评论列表（196条）
测试