回味無窮的CSS屬性font-family

font-family是一個網站用戶體驗的第一入口，很是有必要花功夫來研究一下。咱們首先須要瞭解襯線字體和無襯線字體，接着瞭解中英文的經常使用字體及其適用性。

襯線字體

襯線（serif）的筆畫有粗有細的變化，在每一筆畫上都自有風格，筆畫末端會有修飾，強調藝術感，適合用於博客，旅遊，文化，藝術類網站。

無襯線字體

無襯線（sans-serif）的字體工整方正，給人正式的感受，適合政務類，企業類網站使用。

中文字體

Windows

• simsun，宋體，也是windows下大部分瀏覽器的默認字體，font-size較大時清晰度不佳。
• Microsoft Yahei，無襯線字體，微軟雅黑，是微軟委託中國方正設計的一款中文字體。

Mac OS

• STHeiti，華文黑體，OS X 10.6以前的簡體中文系統界面默認字體，也是目前Chrome遊覽器下的默認字體。
• STXihei，華文細黑，比STHeiti文字更細。
• Heiti SC，黑體-簡，從 OS X 10.6 開始，黑體-簡代替華文黑體用做簡體中文系統界面默認字體，顯示效果不錯，可是喇叭口設計遭人詬病。
• Hiragino Sans GB，冬青黑體，清新的專業印刷字體，小字號時足夠清晰，擁有不少人的追捧。
• PingFang SC，蘋方，在Mac OS X EL Capitan上，蘋果爲中國用戶打造，去掉了爲人詬病的喇叭口。

Linux

• WenQuanYi Micro Hei，文泉驛微米黑，Linux最佳簡體中文字體。

英文字體

Windows

• Arial，無襯線西文字體，顯示效果通常。
• Tahoma，無襯線字體，顯示效果比Arial要好。
• Verdana，無襯線字體，優勢在於它在小字上仍結構清晰端整、閱讀辨識容易。

Mac OS

• Times New Roman，襯線字體，Mac平臺Safari下默認的字體。
• Helvetica、Helvetica Neue，被普遍使用。
• San Francisco，與蘋方同樣，mac os最新的西文字體。

font-family設置原則

• 西文優先：西文字體中大多不包含中文，西文優先，中文緊隨其後，這樣就不會影響到中文字體的選擇。
• 重新到舊：優先體驗最好的字體，向下兼容。
• 兼容多種操做系統：考慮windows, mac os, android, linux等系統。
• 補充字體族：最後根據襯線serif或無襯線sans-serif來補充字體族，當全部設置的字體都找不到時，讓操做系統有選擇字體的方向。

font-family推薦

font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, "Hiragino Sans GB", "Heiti SC", Arial, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
複製代碼

---

首發連接

---

掃一掃下方小程序碼或搜索Tusi博客，即刻閱讀最新文章！