耐人尋味的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下默認的字體。
  • HelveticaHelvetica 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博客,即刻閱讀最新文章!

Tusi博客


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM