之前寫過一篇關(guān)于Web字體簡介及使用技巧的文章：
該篇文章基本沒有太多移動端的字體選擇及分析访忿。并且過了這么久，如今的 Web 字體又有了一些新的東西斯稳，遂有此文海铆。
正文從這里開始。
各大網(wǎng)站最新 font-family
作為前端的一個(gè)習(xí)慣挣惰，瀏覽各個(gè)網(wǎng)站的時(shí)候總是喜歡打開開發(fā)者工具時(shí)不時(shí)審查元素一下卧斟∨贡撸看了一下一些比較出名的網(wǎng)站移動端的 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 中幾乎見不到的字體定義如今已經(jīng)很普遍了。它們是什么呢板乙？是一種特定的字體嗎是偷？
字體基礎(chǔ)知識
在繼續(xù)之前，我們先簡單回顧關(guān)于字體的一些基礎(chǔ)知識募逞。
襯線字體與無襯線字體
就 Web 常用的一些字體而言蛋铆，其實(shí)大體上分為襯線字體和無襯線字體。
襯線字體 -- 關(guān)鍵字為 serif放接，意為有襯線的字體刺啦，襯線的意思是在字符筆畫末端有叫做襯線的小細(xì)節(jié)的額外裝飾，而且筆畫的粗細(xì)會有所不同纠脾，這些細(xì)節(jié)在大寫字母中特別明顯玛瘸。
無襯線字體 -- 關(guān)鍵字為 sans-serif，也就是無襯線的意思苟蹈。專指西文中沒有襯線的字體糊渊，與漢字字體中的黑體相對應(yīng)。與襯線字體相反汉操，該類字體通常是機(jī)械的和統(tǒng)一線條的再来，它們往往擁有相同的曲率蒙兰，筆直的線條磷瘤，銳利的轉(zhuǎn)角。
中文下搜变，無襯線字體就是黑體采缚，黑體字也就是又稱方體或等線體，沒有襯線裝飾挠他，字形端莊扳抽，筆畫橫平豎直，筆跡全部一樣粗細(xì)殖侵。
關(guān)于字體的基礎(chǔ)知識贸呢，建議先看看這篇 你該知道的字體 font-family
font-family 關(guān)鍵字
對于 CSS 中的 font-family 而言，它有兩類取值拢军。
一類是類似這樣的具體的字體族名定義：
font-family: Arial這里定義了一個(gè)具體的字體樣式楞陷，字體族名為Arial;一類是通用字體族名，它是一種備選機(jī)制茉唉，用于在指定的字體不可用時(shí)給出較好的字體固蛾，類似這樣：
font-family: sans-serif结执。
其中，sans-serif 表無襯線字體族艾凯，例如献幔， "Open Sans", "Arial" "微軟雅黑" 等等。
關(guān)于通用字體族名趾诗，在 CSS Fonts Module Level 3 -- Basic Font Properties 中蜡感，定義了 5 個(gè)，也就是我們熟知的幾個(gè)通用字體族名：
- serif 襯線字體族
- sans-serif 非襯線字體族
- monospace 等寬字體沧竟，即字體中每個(gè)字寬度相同
- cursive 草書字體
- fantasy 主要是那些具有特殊藝術(shù)效果的字體
新增通用字體族關(guān)鍵字
而在 CSS Fonts Module Level 4 -- Generic font families 中铸敏，新增了幾個(gè)關(guān)鍵字：
- system-ui 系統(tǒng)默認(rèn)字體
- emoji 用于兼容 emoji 表情符號字符
- math 適用于數(shù)學(xué)表達(dá)式
- fangsong 此字體系列用于中文的（仿宋）字體。
我們看看用的最多的 system-ui悟泵。
system-ui
簡單而言杈笔，font-family: system-ui 的目的就是在不同的操作系統(tǒng)的 Web 頁面下，自動選擇本操作系統(tǒng)下的默認(rèn)系統(tǒng)字體糕非。
默認(rèn)使用特定操作系統(tǒng)的系統(tǒng)字體可以提高性能蒙具，因?yàn)闉g覽器或者 webview 不必去下載任何字體文件，而是使用已有的字體文件朽肥。 font-family: system-ui 字體設(shè)置的優(yōu)勢之處在于它與當(dāng)前操作系統(tǒng)使用的字體相匹配禁筏，對于文本內(nèi)容而言，它可以得到最恰當(dāng)?shù)恼故尽?/p>
San Francisco Fonts
OK衡招，簡單了解了 system-ui字體族篱昔。但是像 -apple-system、BlinkMacSystemFont 沒有在最新的標(biāo)準(zhǔn)里出現(xiàn)始腾。它們又代表什么意思呢州刽？
在此之前，先了解下 San Francisco Fonts 浪箭。
San Francisco Fonts 又叫舊金山字體穗椅，是一款西文字體。隨著 iOS 9 更新面世奶栖，在 WatchOS 中隨 Apple Watch 一起悄然發(fā)售匹表，并且還將在 Apple TV 上的新 tvOS 中使用。
San Francisco Fonts 在 iOS 系統(tǒng)上用于替代升級另外一款西文字體 Helvetica Neue宣鄙。Apple 做了一些重要的改變袍镀，使其成為平臺上更好的， 甚至是完美的西文字體冻晤。
-apple-system/BlinkMacSystemFont
話說回來苇羡。正如每個(gè)前端開發(fā)人員都知道的那樣，將一個(gè)功能納入規(guī)范是一回事明也，將其納入瀏覽器又是另一回事宣虾。
幸運(yùn)的是惯裕，system-ui 的普及很快。 Chrome 和 Safari 都可以在各種平臺上完全支持它绣硝。只有 Mozilla 和 Windows 相對落后蜻势。
看看 system-ui 的兼容性，Can i Use -- system-ui(圖片截取日 2019-08-13)：
仔細(xì)看上圖的最后兩行：
- 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 標(biāo)準(zhǔn)。
Segoe UI
Segoe UI 是 Windows 從 Vista 開始的默認(rèn)西文字體族甫菠，只有西文挠铲，不支持漢字，屬于無襯線體寂诱。
它也表示一個(gè)系列而不是某一款單一字體拂苹。使用 font-family: Segoe UI 可以在 Windows 平臺及 Windows Phone 上選取最佳的西文字體展示。
Roboto
Roboto 是為 Android 操作系統(tǒng)設(shè)計(jì)的一個(gè)無襯線字體家族痰洒。Google 描述該字體為“現(xiàn)代的瓢棒、但平易近人”和“有感情”的。
這個(gè)字體家族包含Thin丘喻、Light脯宿、Regular、Medium泉粉、Bold连霉、Black六種粗細(xì)及相配的斜體。
總結(jié)一下
到此嗡靡，我們可以總結(jié)一下了跺撼。以 CSS-Tricks 網(wǎng)站的 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，使用各個(gè)支持平臺上的默認(rèn)系統(tǒng)字體
- -apple-system叽躯， 在一些稍低版本 Mac OS X 和 iOS 上财边，它針對舊版上的 Neue Helvetica 和 Lucida Grande 字體肌括，升級使用更為合適的 San Francisco Fonts
- BlinkMacSystemFont点骑，針對一些 Mac OS X 上的 Chrome 瀏覽器，使用系統(tǒng)默認(rèn)字體
- segoe ui谍夭，在 Windows 及 Windows Phone 上選取系統(tǒng)默認(rèn)字體
- Roboto黑滴，面向 Android 和一些新版的的 Chrome OS
- Helvetica,Arial，在針對不同操作系統(tǒng)不同平臺設(shè)定采用默認(rèn)系統(tǒng)字體后紧索，針對一些低版本瀏覽器的降級方案
- sans-serif袁辈，兜底方案，保證字體風(fēng)格統(tǒng)一珠漂，至少也得是無襯線字體
上述 5 個(gè)字體族定義晚缩，優(yōu)先級由高到底尾膊，可以看到，它們 5 個(gè)都并非某個(gè)特定字體荞彼，基本的核心思想都是選擇對應(yīng)平臺上的默認(rèn)系統(tǒng)字體冈敛。
涵蓋了 iOS、MAC OS X鸣皂、Android抓谴、Windows、Windows Phone 基本所有用戶經(jīng)常使用的主流操作系統(tǒng)寞缝。
使用系統(tǒng)默認(rèn)字體的主要原因是性能癌压。字體通常是網(wǎng)站上加載的最大/最重的資源之一。如果我們可以使用用戶機(jī)器上已有的字體荆陆，我們就完全不需要再去獲取字體資源滩届，從而使加載時(shí)間明顯加快。
并且系統(tǒng)字體的優(yōu)點(diǎn)在于它與當(dāng)前操作系統(tǒng)使用的相匹配被啼，因此它的文本展示必然也是一個(gè)讓人舒適展示效果丐吓。
當(dāng)然，上述 font-family 的定義不一定是最佳的趟据。譬如天貓?jiān)谧钋懊嫣砑恿?"PingFang SC",miui,..必定也有他們的業(yè)務(wù)上的考慮券犁。但是一些 fallback 方案向后兼容的思想都是一致的，值得參考學(xué)習(xí)汹碱。
最后
還有一些對字體細(xì)節(jié)深入討論的粘衬，感興趣的可以看看下面幾篇文章：
