Web 字體 font-family 淺談
前言
最近研究各大網站的font-family字體設置，發現每一個網站的默認值都不相同，甚至一些大網站也犯了很明顯的錯誤，說明字體仍是有很大學問的，值的咱們好好研究。css
不一樣的操做系統、不一樣瀏覽器下內嵌的默認字體是不一樣的，錯誤的字體設置會致使頁面在不一樣環境渲染的混亂，選擇一套合適的字體是打造優秀網頁的第一步。經過本文，咱們會介紹字體的知識點，並探索在PC和Mobile兩端該如何正確的設置字體。html
字體基礎知識
字體的分類
- serif(襯線)
- sans-serif(無襯線)
- monospace(等寬)
- fantasy(夢幻)
- cuisive(草體)
這些不是指某一個字體，而是一個字體族，是一系列字體的集合，咱們接觸最多的就是襯線字體和無襯線字體。android
serif(襯線字體) & sans-serif(無襯線字體)
Serif的意思是，在字的筆劃開始及結束的地方有額外的裝飾，並且筆畫的粗細會有所不一樣。襯線字體的風格都比較突出，常見的襯線字體有Times New Roman、宋體。ios
Sans Serif字體沒有這些額外的裝飾，筆劃粗細大體差很少，字形端莊，橫平豎直，常見的無襯線字體有Tahoma、Verdana、Arial、Helvetica、蘋方、微軟雅黑等等。git
monospace(等寬字體)
等寬字體是指字符寬度相同的字體，一般用於編輯器以及技術文章的代碼塊中，等寬主要針對西文字體，而對於中文每一個漢子都是等寬的，courier是最多見的等寬字體。github
fantasy(夢幻字體) & cuisive(草書字體)
在瀏覽器中使用的場景很少，很少作介紹。web
font-family屬性
設置元素的字體，能夠同時指定多個，若是瀏覽器不支持第一個字體，則會嘗試下一個，能夠設置字體或字體系列。chrome
如：font-family: Arial, sans-serif;segmentfault
若是不設置font-family則使用瀏覽器默認字體，若是設置的font-family無效，也會fallback到瀏覽器的默認字體。windows
常見字體介紹
Helvetica
蘋果系統支持的一種西文無襯線字體，是蘋果生態中最經常使用的一套西文字體。Helvetica Neue是Helvetica字體改善版本，增長了更多不一樣粗細與寬度的字形。
Arial
是爲了與Helvetica競爭而設計的無襯線西文字體，表現形式和Helvetica相似，在不一樣系統的瀏覽器都支持，兼容性很是好。
Tahoma
一種無襯線字體，間距較小，在不一樣系統的瀏覽器都支持，兼容性良好，能夠解決Helvetica和Arial所爲人詬病的缺點，好比大寫的 I 和小寫的 L 難以分辨。
San Francisco
蘋果於2017年推出一種無襯線字體，也是目前蘋果系統的默認西文字體，相比於Helvetica字體，San Francisco的字體風格更加簡潔，減小了一些修飾的細節，支持符號的總體居中，好比時間顯示，以前的 Helvetica 的冒號是不居中的。
最低兼容版本：ios九、macOS10.11
PingFang SC(蘋方-簡)
蘋果專爲中國用戶打造的一箇中文無襯線字體，在2017年和San Francisco一塊兒推出，SC表明簡體，同時還有臺灣繁體和香港繁體，總體造型簡潔美觀，是蘋果系統默認的中文字體。
最低兼容版本：ios九、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指定的字體不必定相同。
書寫字體規則
在介紹字體規則前，有幾點是須要注意的：
一、不一樣平臺，預置的字體並不相同。好比Helvetica和蘋方也只有蘋果系統內置，微軟雅黑只有windows系統內置(因爲不少人安裝Office的緣故，Mac電腦中也會出現微軟雅黑字體)，android 和 iOS 系統內置的字體各不相同。
二、字體是有版權的，可是若是沒有引用外部字體文件（如 Web font 或者內嵌到 App 中），而僅僅是在 CSS 中指定字體名稱，不須要購買受權，由於其只是一段聲明，表示指望瀏覽器優先使用某種字體渲染文本。
三、中文網站涉及兩種文字類型：西文字體和中文字體，西文字體包括英文數字等，不包括中文，可是中文字體通常包括英文和數字，咱們通常先設置西文字體，後設置中文。
四、若是字體包含空格或者是中文，須要添加引號。
五、大部分字體全名中會包含字體粗細、斜體（italic）、長體（condensed）等具體屬性，但通常不建議直接使用，字體的風格應該在 CSS 中經過 font-weight、font-style、font-stretch等屬性指定，由瀏覽器決定實際渲染的字體。
六、font-family屬於可繼承屬性，全局的font-family通常設置在body元素上。
咱們能夠總結字體定義的大概規則以下：
一、西文在前，中文在後
中文字體大多都包含西文，但西文的部分又很差看，而西文不包含中文，一般先定義西文，後定義中文以達到更優的顯示效果。
二、優先使用system-ui
system-ui使用當前系統的默認字體，讓web頁面和操做系統的風格統一，體驗更好。
三、兼顧不一樣的操做系統
選擇字體的時候要考慮不一樣的操做系統，還須要考慮舊版本操做系統的用戶。
即使是同一個字體在不一樣的操做下也會有細微的差異，咱們要儘可能作到相同系統使用同一種字體，保證同一個系統下的字體一致性。對於不一樣系統儘可能保證字體風格接近，好比都使用無襯線字體。
爲了保證蘋果系統中使用更優雅的中文字體，優先聲明蘋方字體, 對於不支持蘋方的低版本macOS，使用Hiragino Sans GB(冬青黑體)字體作兜底。
若是須要兼容Linux系統，還須要添加WenQuanYi Micro Hei(文泉驛微米黑)字體。
若是須要兼容不一樣平臺的表情符號，通常在sans-serif後添加"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"等字體。
四、以serif或sans-serif字體族結尾
爲了保證在各類不一樣環境或條件下顯示正常，咱們通常將sans-serif放在字體的後面，非襯線字體在顯示器中的顯示效果更好。
五、簡潔實用
字體設置並非越多越好，在能知足設計需求的狀況下儘可能簡潔。相同系統下中西文字體各有一個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;
注意：
一、字體的設置沒有固定標準，須要根據業務狀況進行定奪，以上只是推薦寫法，若是設計師有要求能夠在此基礎上進行改動。
二、css的font-family權重是高於瀏覽器默認字體的，有一些網站選擇不設置font-family，使用瀏覽器的默認字體，傾向於用戶的選擇，這就是仁者見仁了。
指定元素字體
當給某個元素設置了font-faimily後，全局默認字體則對這個元素無效，這時也要考慮字體兼容問題，最好指定一個fallback字體，並以sans-serif結尾。
div {
font-faimiy: "PingFang SC", sans-serif;
}
各大網站font-family點評
首先聲明，如下僅爲我的觀點，若有錯誤歡迎指出🙂
如下數據取值時間：2020-11-25
淘寶首頁
tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif
\5b8b\4f53爲宋體的Unicode編碼，這樣能夠有效的避免瀏覽器解釋CSS代碼時候出現亂碼的問題。
淘寶首頁的默認字體很是簡潔，可是在macOS上使用的中文字體爲無襯線的冬青黑體，而在windows上使用的是襯線字體宋體，兩個系統字體表現差別仍是很明顯的。
京東首頁
Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
京東首頁使用微軟雅黑做爲首選字體，這樣中英文都會爲微軟雅黑，在macOS safari默認是不支持微軟雅黑因此會fallback到Heiti SC(黑體)，而黑體做爲較早版本macOS的默認中文字體由於喇叭口設計被詬病已久。固然京東這麼設置確定是有他們的考慮，可是中文字體放在tahoma、arial等西文字體前仍是不建議的，除非設計師或業務要求。
天貓首頁
"Microsoft YaHei",SimSun,'\5b8b\4f53',sans-serif
SimSun：也是宋體
天貓首頁默認字體設置和京東相似，首選中英文都是微軟雅黑，上面說到過macOS safari默認是不支持微軟雅黑，因此會fallback到宋體，宋體是襯線字體，致使macOS上其它瀏覽器和safari瀏覽器字體差別很大。
下圖分別爲macOS10.14.5下，chrome和safari的效果
騰訊網首頁
'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif
騰訊網首頁也是以微軟雅黑做爲中西文首選字體，而且在不一樣系統上都有相應的fallback，理論上是不錯的，但還如同上面所說，除非設計師或業務須要，不建議以中文字體開頭。
新浪微博
Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif
新浪微博的默認字體我的以爲是很是好的。
掘金首頁
-apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial
掘金這裏犯了一個很是明顯的錯誤，在sans-serif後定義了其它中英文字體，由於sans-serif後定義的中英文字體都是無效的。掘金做爲大神雲集的地方，犯這麼低級的錯誤實在不該該。
segmentfault首頁
-apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif
我的以爲很好。
知乎首頁
-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif
Source Han Sans SC、Noto Sans CJK SC這兩個都是思源黑體，雖然是開源字體，可是在大部分系統中都沒有內置，這裏設置是否是不必？
頭條首頁
PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif
也是如同上面提到的，Helvetica Neue,Arial等西文字體建議放在前面。
在此重申，以上僅是我的經驗觀點，若有錯誤歡迎指出🙂
參考連接
- 1. Web 字體 font-family 淺談
- 2. 圖標字體化淺談
- 3. 淺談Python Web
- 4. 淺談Web Workers
- 5. 圖標字體化淺談[轉]
- 6. 淺談web開發
- 7. Web安全淺談
- 8. 淺談WEB緩存
- 9. 淺談web緩存
- 10. 淺談Web安全
- 更多相關文章...
- • Rust 結構體 - RUST 教程
- • DTD - 實體 - DTD 教程
- • 漫談MySQL的鎖機制
- • Docker容器實戰(八) - 漫談 Kubernetes 的本質
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Web 字體 font-family 淺談
- 2. 圖標字體化淺談
- 3. 淺談Python Web
- 4. 淺談Web Workers
- 5. 圖標字體化淺談[轉]
- 6. 淺談web開發
- 7. Web安全淺談
- 8. 淺談WEB緩存
- 9. 淺談web緩存
- 10. 淺談Web安全