幫你克服web字體選擇焦慮症

• 2022 年 1 月 9 日
• 筆記

1.背景

前端時間產品經理問我，移動端web默認字體有哪些，哪些字體不侵權？我當時感覺這方面的知識很匱乏，只能回答出微軟雅黑和蘋方簡體，平常寫程式碼時，沒怎麼留意過font-family設置的字體屬性，今天有空，決定學習一下這個知識點。

2.字體族的分類

字體族主要分為6大類：分別是serif(襯線),sans-serif(無襯線字體),monospace(等寬),cuisive(草體),fantasy(夢幻),emoji(表情)。web平常我們接觸最多的就是襯線字體和無襯線字體。尤其是無襯線字體，文中將重點介紹。

2.1 serif(襯線)

serif字體的特點是在字的筆畫粗細會不同，始末端風格比較突出，常見的襯線字體有Times New Roman、MS Georgia，宋體，仿宋等。

圖片引自 serif，sans-serif，monospace，cursive和fantasy

2.2 sans-serif(無襯線)

Sans-Serif字體沒有這些額外的裝飾，筆劃粗細大致差不多，字形端莊，橫平豎直，常見的無襯線字體有Tahoma、Verdana、Arial、Helvetica、蘋方、微軟雅黑，黑體、幼圓、隸書、楷體等。

sans-serif(無襯線字體)和serif(襯線字體)的區別

圖片引自 如何優雅的選擇字體(font-family)

2.3 monospace(等寬)

等寬字體是指字元寬度相同的字體，通常用於編輯器以及技術文章的程式碼塊中，等寬主要針對西文字體，中文漢字天然等寬，Courier、MS Courier New、Prestige，多數中文字體是最常見的等寬字體。

2.4 cuisive(草體)

特點：像手寫的一樣，Caflisch Script、Adobe Poetica，徐靜蕾手寫體、迷你簡黃草、華文行草、少女體是手寫體的代表。

2.5 fantasy(夢幻)

特點：藝術字，主要用於圖片，頁面上用的少 。代表字體有 WingDings、WingDings 2、WingDings 3、Symbol，蘿蔔體

2.6 emoji(表情)

顧名思義，無需過多解釋。使用場景很好理解。

3.常見的作業系統自帶字體

3.1 sans-serif字體--西文

3.2 sans-serif字體--中文

3.3 serif字體--中文

• 宋體： 一種中文襯線字體，windows 和 macOS都有支援，字體偏瘦，風格明顯。宋體也是windows XP及更早系統的默認中文字體。

3.4 表情字體

4.瀏覽一下圈內網站的font-family設置 (查看時間-2022.01.09)

4.1天貓

body {
    font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

備註：漢字宋體的unicode是'\5b8b\4f53'

4.2京東

body{
    font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}

4.3騰訊網

body {
    font: 400 1em/1.8 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
}

4.4百度

body{
    font-family: Arial,sans-serif;
}

4.5部落格園

body {
    font-family: 'PingFang SC','Microsoft YaHei','Helvetica Neue','Helvetica','Arial',sans-serif;
}

4.6掘金

html {
    font-family: -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial;
}

備註：

1. -apple-system是system-ui的兼容寫法，只在ios和macOS上的safari、Firefox、webview等環境下支援。
2. system-ui是一種通用字體系列，它選擇當前作業系統下的默認系統字體，它的優勢在於和當前系統使用的字體相匹配，可以讓Web頁面和App風格看起來更統一。

4.7簡書

body{
    font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
}

評價：

• 當字體名稱包含空格，則需要用雙引號或單引號包裹。京東，掘金，簡書有空格的字體名稱寫法不嚴謹。
• 每個系統都會帶有無襯線字體，所以sans-serif一般放在最後作為兜底，sans-serif之後的字體都不會生效，除了Emoji字體。因此掘金的兜底字體寫的不太規範。

5 總結

5.1 字體族選擇

• 在顯示設備上，襯線會讓文字變得難以辨認,sans-serif無襯線字體適合在線閱讀，是web頁面全局字體設置首選。
• 襯線字體在列印的場景更容易閱讀，讓人更容易清楚區分不同字母。 serif 適用於列印頁面
• monospace每個字元等寬，在頁面上佔據相同的空間，多用於頁面上的程式碼塊
• fantasy和cursive適用特殊藝術效果展示的場景，在圖片或標題用的比較多。

5.2 字體使用原則

• 先西後中
  中文網站涉及兩種文字類型：西文字體和中文字體，西文字體包括英文數字等，不包括中文，但是中文字體一般包括英文和數字，但西文部分不好看，為了達到更好的顯示效果,通常先定義西文字體，後定義中文字體。
• 系統兼顧
  為了保證蘋果系統中使用更優雅的中文字體，優先聲明蘋方簡體, 對於不支援蘋方的低版本macOS，使用Hiragino Sans GB(冬青黑體)字體做兜底。
  如果需要兼容Linux系統，還需要添加WenQuanYi Micro Hei(文泉驛微米黑)字體。
  如果需要兼容不同平台的表情符號，一般在sans-serif後添加"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"等字體。
• 優先使用system-ui
  system-ui使用當前系統的默認字體，讓web頁面和作業系統的風格統一，體驗更好。
• 以sans-serif字體族兜底
  當所有的字體都找不到時，我們可以使用字體族名稱作為作業系統最後選擇字體的方向。一般將sans-serif放在字體的後面，非襯線字體在顯示器中的顯示效果更好。

5.3 推薦字體設置

遵照以上四條原則，推薦的字體設置為：

font-family: system-ui, -apple-system, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

推薦理由:

• 優先設置system-ui，讓web和app,pc的字體風格一致，-apple-system是ios和macOS上的safari、Firefox、webview上system-ui的兼容性寫法
• 西文無襯字體優先選擇Tahoma，Tahoma字體在小字型大小下結構清晰端整、閱讀辨識容易，可以解決Helvetica和Arial所為人詬病的缺點，比如大寫的I和小寫的L難以分辨。在不同作業系統支援性好，所以作為首選字體，如果系統沒有預裝Tahoma，則使用Arial作為替代。Arial在ios和android上支援性很好。
• 中文無襯字體優先選擇"PingFang SC"，"PingFang SC"造型簡潔美觀，是蘋果系統默認的中文字體。"Hiragino Sans GB"是蘋果系統早期的默認的中文無襯字體，為了兼容舊版macOS系統，用它作為蘋方字體的fallback。"Microsoft YaHei"是Windows系統默認的中文字體，也是一套無襯線字體。macOS上的瀏覽器大都預裝微軟雅黑。
• 如果前面的字體都不存在，使用sans-serif兜底。
• 最後大多數字體都有版權，而這些字體都是系統內置字體，不會涉及到侵權。

參考文章

• 如何優雅地選擇字體
• serif，sans-serif，monospace，cursive和fantasy
• Web 字體 font-family 淺談