網頁中font-family的屬性解析


web中文字體的選擇

web應用程序因其跨平台性被廣泛應用,但是也為web應用程序運行帶來了復雜的運行環境,比如各個系統字體的區別以及中英文字體顯示的區別。

字體分類

網頁常用字體通常分為5類:serif(襯線)、sans-serif(無襯線)、monospace(等寬)、fantasy(夢幻)、cuisive(草體),這些通用的名稱允許用戶代理從相應集合中選擇一款字體。

  • serif 字體在字符筆畫末端有叫做襯線的小細節,這些細節在大寫字母中特別明顯。
  • sans-serif 字體在字符筆畫末端沒有任何細節,與serif字體相比,他們的外形更簡單。
  • monospace 字體,每個字母的寬度相等,通常用於計算機相關書籍中排版代碼塊。
  • fantasy 和 cuisive 字體在瀏覽器中不常用,在各個瀏覽器中有明顯的差異。

網頁常用字體

Sans-serif:
  • Helvetica: 被評為設計師最愛的字體,Realist風格,簡潔現代的線條,非常受到追捧。在Mac下面被認為是最佳的網頁字體,在Windows下由於Hinting的原因顯示很糟糕。

  • Arial: Helvetica的「克隆」,和Helvetica非常像,細節上比如R和G有小小差別。如果字號太小,文字太多,看起來會有些累眼。Win和Mac顯示都正常

  • Lucida Family: Lucida Grande是Mac OS UI的標准字體,屬於humanist風格,稍微活潑一點。Mac下的顯示要比Win下好。

  • Verdana: 專門為了屏顯而設計的字體,humanist風格,在小字號下仍可以清楚顯示,但是字體細節缺失嚴重,最好別做標題。

  • Tahoma: 也是humanist風格,字體和Verdana有點像,但是略窄一些,counter略小,曾經是Windows的標准字體,Mac 10.5之后默認也有安裝。

  • Trebuchet MS: 為微軟設計的一個humanist風格字體,個人覺得個性太過突出,用得不好會不搭。

Serif:
  • Georgia: 基本上適合正文屏顯的襯線字體,非Georgia莫屬了。筆畫粗重,襯線明線,輪廓較大,小字體顯示也很清晰,同時細節還算OK。

  • Times: Times是為了報紙而設計的,特點是可以在有限的空間塞進去更多的文字,筆畫較弱,小字號正文屏顯看起來累眼。曾經Engadget改版的時候用了Times作為正文,被罵得很慘之后換成了Georgia。

中文:
  • 宋體:Win最常見的字體,小字體點陣,大字體TrueType,但是大字體並不好看,所以最好別做標題。

  • 微軟雅黑:Vista之后新引入的字體,打開Cleartype之后顯示效果不錯,不開Cleartype發虛。

  • 華文細黑:Mac下的默認中文。

font-family寫法

  • 由於某些系統可能不存在中文字體的中文名,所以寫中文字體別忘了添加英文名

  • 因為英文字體的渲染通常比用中文字體渲染的效果好,所以英文字體聲明在中文字體前。

  • 盡量在各個系統中都顯示的最好

由此可得出font-family的寫法:

font-family: Arial, STXihei, "華文細黑", "Microsoft YaHei", "微軟雅黑",SimSun, "宋體" ;

這樣寫基本可以保證主流系統在顯示網頁字體的時候效果最好,當然要注意的是:設計師在設計網頁的時候也需要照顧不同的平台的字體屬性
更多請訪問:http://www.zuoyan.space/


免責聲明!

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



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