Web 字型 font-family 該如何設定？
前言
最近研究各大網站的font-family字型設定，發現每個網站的預設值都不相同，甚至一些大網站也犯了很明顯的錯誤，說明字型還是有很大學問的，值的我們好好研究。
不同的作業系統、不同瀏覽器下內嵌的預設字型是不同的，錯誤的字型設定會導致頁面在不同環境渲染的混亂，選擇一套合適的字型是打造優秀網頁的第一步。通過本文，我們會介紹字型的知識點，並探索在PC和Mobile兩端該如何正確的設定字型。
字型基礎知識
字型的分類
- serif(襯線)
- sans-serif(無襯線)
- monospace(等寬)
- fantasy(夢幻)
- cuisive(草體)
這些不是指某一個字型，而是一個字型族，是一系列字型的集合，我們接觸最多的就是襯線字型和無襯線字型。
serif(襯線字型) & sans-serif(無襯線字型)
Serif的意思是，在字的筆劃開始及結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。襯線字型的風格都比較突出，常見的襯線字型有Times New Roman、宋體。
Sans Serif字型沒有這些額外的裝飾，筆劃粗細大致差不多，字形端莊，橫平豎直，常見的無襯線字型有Tahoma、Verdana、Arial、Helvetica、蘋方、微軟雅黑等等。
monospace(等寬字型)
等寬字型是指字元寬度相同的字型，通常用於編輯器以及技術文章的程式碼塊中，等寬主要針對西文字型，而對於中文每個漢子都是等寬的，courier是最常見的等寬字型。
fantasy(夢幻字型) & cuisive(草書字型)
在瀏覽器中使用的場景不多，不多做介紹。
font-family屬性
設定元素的字型，可以同時指定多個，如果瀏覽器不支援第一個字型，則會嘗試下一個，可以設定字型或字體系列。
如：font-family: Arial, sans-serif;
如果不設定font-family則使用瀏覽器預設字型，如果設定的font-family無效，也會fallback到瀏覽器的預設字型。
常見字型介紹
Helvetica
蘋果系統支援的一種西文無襯線字型，是蘋果生態中最常用的一套西文字型。Helvetica Neue是Helvetica字型改善版本，增加了更多不同粗細與寬度的字形。
Arial
是為了與Helvetica競爭而設計的無襯線西文字型，表現形式和Helvetica類似，在不同系統的瀏覽器都支援，相容性非常好。
Tahoma
一種無襯線字型，間距較小，在不同系統的瀏覽器都支援，相容性良好，可以解決Helvetica和Arial所為人詬病的缺點，比如大寫的 I 和小寫的 L 難以分辨。
San Francisco
蘋果於2017年推出一種無襯線字型，也是目前蘋果系統的預設西文字型，相比於Helvetica字型，San Francisco的字型風格更加簡潔，減少了一些修飾的細節，支援符號的整體居中，比如時間顯示，之前的 Helvetica 的冒號是不居中的。
最低相容版本：ios9、macOS10.11
PingFang SC(蘋方-簡)
蘋果專為中國使用者打造的一箇中文無襯線字型，在2017年和San Francisco一起推出，SC代表簡體，同時還有臺灣繁體和香港繁體，整體造型簡潔美觀，是蘋果系統預設的中文字型。
最低相容版本：ios9、macOS10.11
Hiragino Sans GB(冬青黑體)、Heiti SC(黑體)
蘋果系統中較早的中文無襯線字型，為了相容舊版macOS系統，我們一般用它們作為蘋方字型的fallback。
Segoe UI
windows系統下的一種無襯線西文字型，也是windows系統的預設西文字型。
Microsoft YaHei(微軟雅黑)
Windows系統預設的中文字型，也是一套無襯線字型。macOS上的瀏覽器大都預裝微軟雅黑，但不包括safari瀏覽器。
ios和android系統不支援微軟雅黑，所以設定移動端字型時可以忽略微軟雅黑。
宋體
一種中文襯線字型，windows 和 macOS都有支援，字型偏瘦，風格明顯。
宋體也是windows XP及更早系統的預設中文字型。
WenQuanYi Micro Hei(文泉驛微米黑)
Linux系統下預設中文字型，一般為了相容Linux系統才會設定這個字型。
Roboto
Android系統的預設西文字型，也是一種無襯線字型
Noto Sans (思源黑體)
Android系統的預設中文無襯線字型，由google推出的一款開源字型。
Apple Color Emoji
蘋果產品的文字表情，在Mac和iOS系統中到處都可以看到，也是我們接觸的最多的Emoji表情。
Segoe UI Emoji
Windows10系統中的Emoji表情，黑描邊風格，沒有蘋果的圓潤和質感。
Noto Color Emoji
Google推出的表情，和蘋果的較為類似，更加扁平。
瀏覽器預設字型
預設字型分為系統預設字型和瀏覽器預設字型，這兩者是不同的。
這裡我們討論的是瀏覽器預設字型，系統預設字型會在下面的system-ui中介紹。
當元素沒有指定font-family或者設定的font-family無效時，會fallback到瀏覽器預設字型。
PC端
PC端的瀏覽器支援設定不同的預設字型。
下圖是chrome的配置選項，標準字型就是預設字型，當font-family屬性沒有設定時會啟用這個字型。
因為Arial是西文字型，對中文無效，瀏覽器會選擇合適的中文字型，在Windows上一般為微軟雅黑，在macOS一般為蘋方。但是部分瀏覽器會根據預設字型的風格選擇近似的中文字型，Arial是無襯線字型，瀏覽器也會選擇一種無襯線字型適配中文，如果預設字型是襯線字型，那麼瀏覽器就會選擇一種襯線中文字型，為了抹平這種差異，我們通常在font-family最後設定sans-serif指定無襯線字型作為兜底。
移動端
移動端瀏覽器通常不支援指定預設字型。
ios的預設中文字型為蘋方，當lang設定為zh-CN，西文也是蘋方。當lang不設定或者設定為en時，西文預設字型為Times New Roman，一種襯線字型。
<!DOCTYPE html>
<html lang='zh-CN'>
...
android的字型稍微複雜，它的的預設字型為西文：Roboto，中文：Noto Sans (思源黑體)，但不同廠商可能會使用自定義的字型，比如小米部分手機使用的是小米蘭亭。
android端lang設定為zh-CN或en時表現也有可能不同，雖然都是無襯線字型，但差異很明顯。即便lang都設定為zh-CN，不同的安卓機上的預設西文字體表現也有可能是不同的，一個字形容：亂。
以上提到的移動端系統版本：ios9+ android4+
正是由於瀏覽器預設字型的複雜體現出設定font-family的重要性。
system-ui
system-ui是一種通用字體系列，它選擇當前作業系統下的預設系統字型，它的優勢在於和當前系統使用的字型相匹配，可以讓Web頁面和App風格看起來更統一。
使用方式
font-family: system-ui;
相容性
system-ui推出的時間較晚，但相容性比較不錯，目前主流的瀏覽器都已經支援。
下圖是Can I Use上統計的相容資訊
-apple-system
-apple-system是system-ui的相容寫法，只在ios和macOS上的safari、Firefox、webview等環境下支援。
BlinkMacSystemFont
也是system-ui的相容寫法，只在macOS chrome下支援，主要針對chrome 53-55版本
效果
在ios和macOS上，system-ui指向的中文字型為蘋方，西文字型為San Francisco。android系統下中文通常為Noto Sans (思源黑體)，西文字型為Roboto。windows系統上一般為微軟雅黑，但是在部分windows系統上的字體會出現問題，所以windows上不建議使用system-ui。
sans-serif(無襯線字型)
在現行主流終端裝置中，無襯線體比有襯線體更易讀，無襯線體更適合作為網頁的預設全域性字型設定。
每個系統都會帶有無襯線字型，所以sans-serif一般放在最後作為兜底，sans-serif之後的字型都不會生效，除了Emoji字型。
PC端瀏覽器可以在設定中指定sans-serif字型。
移動端瀏覽器不能在設定中指定sans-serif字型，它們會根據lang指定的語言環境選擇合適的字型，和system-ui指定的字型不一定相同。
書寫字型規則
在介紹字型規則前，有幾點是需要注意的：
1、不同平臺，預置的字型並不相同。比如Helvetica和蘋方也只有蘋果系統內建，微軟雅黑只有windows系統內建(由於很多人安裝Office的緣故，Mac電腦中也會出現微軟雅黑字型)，android 和 iOS 系統內建的字型各不相同。
2、字型是有版權的，但是如果沒有引用外部字型檔案（如 Web font 或者內嵌到 App 中），而僅僅是在 CSS 中指定字型名稱，不需要購買授權，因為其只是一段宣告，表示期望瀏覽器優先使用某種字型渲染文字。
3、中文網站涉及兩種文字型別：西文字型和中文字型，西文字型包括英文數字等，不包括中文，但是中文字型一般包括英文和數字，我們一般先設定西文字型，後設置中文。
4、如果字型包含空格或者是中文，需要新增引號。
5、大部分字型全名中會包含字型粗細、斜體（italic）、長體（condensed）等具體屬性，但一般不建議直接使用，字型的風格應該在 CSS 中通過 font-weight、font-style、font-stretch等屬性指定，由瀏覽器決定實際渲染的字型。
6、font-family屬於可繼承屬性，全域性的font-family一般設定在body元素上。
我們可以總結字型定義的大概規則如下：
1、西文在前，中文在後
中文字型大多都包含西文，但西文的部分又不好看，而西文不包含中文，通常先定義西文，後定義中文以達到更優的顯示效果。
2、優先使用system-ui
system-ui使用當前系統的預設字型，讓web頁面和作業系統的風格統一，體驗更好。
3、兼顧不同的作業系統
選擇字型的時候要考慮不同的作業系統，還需要考慮舊版本作業系統的使用者。
即便是同一個字型在不同的操作下也會有細微的差別，我們要儘量做到相同系統使用同一種字型，保證同一個系統下的字型一致性。對於不同系統儘量保證字型風格接近，比如都使用無襯線字型。
為了保證蘋果系統中使用更優雅的中文字型，優先宣告蘋方字型, 對於不支援蘋方的低版本macOS，使用Hiragino Sans GB(冬青黑體)字型做兜底。
如果需要相容Linux系統，還需要新增WenQuanYi Micro Hei(文泉驛微米黑)字型。
如果需要相容不同平臺的表情符號，一般在sans-serif後新增"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"等字型。
4、以serif或sans-serif字型族結尾
為了保證在各種不同環境或條件下顯示正常，我們一般將sans-serif放在字型的後面，非襯線字型在顯示器中的顯示效果更好。
5、簡潔實用
字型設定並不是越多越好，在能滿足設計需求的情況下儘量簡潔。相同系統下中西文字型各有一個fallback即可，不需要太多。
字型設定
通過字型的知識點和字型設定規範介紹，我們總結出全域性預設字型的設定方式。
移動端
相容版本：ios9+、android4+
推薦寫法：
font-family: system-ui, -apple-system, Arial, sans-serif;
解讀：優先使用system-ui，使用Arial做西文字型的fallback是因為它和Helvetica字型相似，並且在ios和android支援性很好。
PC端
推薦寫法1：
macOS系統優先使用系統字型
font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
推薦寫法2：
指定字型
font-family: Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
windows系統電腦螢幕解析度普遍不高，Tahoma字型在小字號下結構清晰端整、閱讀辨識容易，在不同作業系統支援性好，所以作為首選字型，如果系統沒有預裝Tahoma，則使用Arial作為替代。但兩者差別不大，Arial優先順序提前也行。
需要需要相容Linux系統和表情符號，可以新增WenQuanYi Micro Hei和Emoji字型，如：
font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
如想突出macOS和windows的字型特色，可以在Tahoma前面設定Helvetica或Segoe UI為首選字型，如：
font-family: "Helvetica Neue", "Segoe UI", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
注意：
1、字型的設定沒有固定標準，需要根據業務情況進行定奪，以上只是推薦寫法，如果設計師有要求可以在此基礎上進行改動。
2、css的font-family權重是高於瀏覽器預設字型的，有一些網站選擇不設定font-family，使用瀏覽器的預設字型，傾向於使用者的選擇，這就是仁者見仁了。
指定元素字型
當給某個元素設定了font-faimily後，全域性預設字型則對這個元素無效，這時也要考慮字型相容問題，最好指定一個fallback字型，並以sans-serif結尾。
div {
font-faimiy: "PingFang SC", sans-serif;
}
各大網站font-family點評
首先宣告，以下僅為個人觀點，如有錯誤歡迎指出