網頁中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/