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博客
,即刻閱讀最新文章!