浏覽器(qì)默認的樣式往往在不同的浏覽器(qì)、不同的語言版本甚至不同的系統版本都有(yǒu)不同的設置，這就導緻如 果直接利用默認樣式的頁面在各個(gè)浏覽器(qì)下顯示非常不一緻，于是就有(yǒu)了類似YUI的reset之類用來(lái)盡量重寫浏覽器(qì)的默認設置保證各個(gè)浏覽器(qì)樣式一緻性的做(zuò)法。

拿(ná)字體(tǐ)來(lái)說，各個(gè)浏覽器(qì)默認的字體(tǐ)種類、字體(tǐ)大(dà)小(xiǎo)和(hé)字體(tǐ)行(xíng)高(gāo)都不一樣，比如IE8的中文版在Windows XP下顯示網頁時(shí)默認字體(tǐ)是宋體(tǐ)，而英文版肯定不會(huì)如此。所以我們需要統一設置默認的字體(tǐ)樣式，以便實現一緻的顯示效果來(lái)保證設計(jì)的一緻性和(hé)提高(gāo)開(kāi)發效率。

樣式優先級

通(tōng)常用戶看到的頁面的樣式會(huì)受到三層控制(zhì):

第一層是浏覽器(qì)的默認樣式

第二層是網頁定義樣式

第三層是用戶自定義樣式

和(hé)CSS一樣，後面的優先級 高(gāo)于前面的，也就是說網頁定義樣式可(kě)以覆蓋浏覽器(qì)的默認樣式，而用戶自定義樣式優先級最高(gāo)。不過，當有(yǒu) !important 時(shí)，網頁樣式可(kě)以覆蓋用戶自定義樣式。用戶!important > 網頁!important > 用戶 > 網頁 > 浏覽器(qì)默認。

字體(tǐ)：arial

我們頁面的絕大(dà)部分內(nèi)容字符都是中文，毫無疑問目前為(wèi)止在網頁上(shàng)最常用也是最通(tōng)用的顯示中文的字體(tǐ)是宋體(tǐ)，但(dàn)是宋體(tǐ)在顯示英文、數(shù)字和(hé)英文符号時(shí)過于糟糕，比如©字符，所以我們一般期望通(tōng)過CSS來(lái)實現用更好的字體(tǐ)樣式來(lái)顯示它們，然後用宋體(tǐ)來(lái)顯示中文和(hé)中文符号。之所以選擇arial是因為(wèi)：

Windows和(hé)Mac都預裝了這款字體(tǐ)，應該是使用最廣泛的網頁字體(tǐ)了。它的潛在對手tahoma和(hé)helvetica就沒有(yǒu)這麽幸運了。

視(shì)覺設計(jì)的專業人(rén)士可(kě)能會(huì)認為(wèi)在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘寶的默認字體(tǐ)樣式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; 　　這是一個(gè)很(hěn)不錯的選擇，但(dàn)是你(nǐ)也會(huì)發現Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作(zuò)為(wèi)第一默認字體(tǐ)。所以從美觀和(hé)可(kě)讀性上(shàng)來(lái)講arial應該是完全可(kě)以接受的。

一般情況下設置font-family都會(huì)在最後設置通(tōng)用字體(tǐ)族以保證其安全性，比如Google的設置為(wèi)font-family:arial,sans-serif;，但(dàn)是至少(shǎo)在非中文版的Win7下當編碼是GBK時(shí)，IE8會(huì)因sans-serif來(lái)渲染宋體(tǐ)，導緻字體(tǐ)出現變形，這就是為(wèi)什麽淘寶需要在sans-serif前加上(shàng)宋體(tǐ)而Google無需這樣做(zuò)的原因。

因為(wèi)中文字體(tǐ)的選擇非常有(yǒu)限，所以目前所有(yǒu)的主流浏覽器(qì)都設置使用宋體(tǐ)來(lái)顯示中文。Baidu的首頁和(hé)搜索結果頁使用font-family:arial;可(kě)以從側面說明(míng)這樣做(zuò)的安全性。可(kě)能有(yǒu)人(rén)注意到Firefox中國版默認顯示的中文字體(tǐ)是微軟雅黑(hēi)，這是因為(wèi)謀智網絡擅自修改了用戶自定義樣式，不允許網頁的樣式覆蓋浏覽器(qì)設置的樣式。也是由于類似的情況，我們要彈性設計(jì)網頁非常重要。

使用英文字體(tǐ)作(zuò)為(wèi)第一默認字體(tǐ)會(huì)導緻的問題之一就是中英文以及符号混排時(shí)的對齊問題、通(tōng)過設置行(xíng)高(gāo)和(hé)hasLayout能解決絕大(dà)部分情況，但(dàn)是都不會(huì)很(hěn)完美，如果把字體(tǐ)改成“宋體(tǐ)”能徹底的解決問題。很(hěn)明(míng)顯，這個(gè)問題隻出現在IE上(shàng)。所以，如果你(nǐ)的網站(zhàn)很(hěn)少(shǎo)使用英文、數(shù)字和(hé)英文符号，那(nà)麽直接設置{font-family:\5b8b\4f53;}也是很(hěn)合理(lǐ)的選擇。

大(dà)小(xiǎo)：12px

12px是宋體(tǐ)能顯示的極限，雖然微軟雅黑(hēi)能顯示更小(xiǎo)的字體(tǐ)，但(dàn)目前的應用環境尚未成熟。由于宋體(tǐ)基本上(shàng)是目前顯示中文唯一的通(tōng)用Web字體(tǐ)，所以12px成為(wèi)最常用的字體(tǐ)大(dà)小(xiǎo)。我們當然可(kě)以依據産品的需要來(lái)修改這個(gè)默認值。

不用考慮基于字體(tǐ)大(dà)小(xiǎo)（em）的設計(jì)。

在Chrome3.0之後的中文版中，字體(tǐ)大(dà)小(xiǎo)最小(xiǎo)值是12px，比如你(nǐ)設置最小(xiǎo)字體(tǐ)為(wèi)10px，最後也變成12px。

行(xíng)高(gāo)：1.5倍

這是一個(gè)經驗值，不同的産品對這個(gè)值要求可(kě)能不同，但(dàn)我們一般會(huì)設置最常用的為(wèi)默認值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字體(tǐ)大(dà)小(xiǎo)默認值是13px，行(xíng)高(gāo)是13*1.231=16.003px，默認的行(xíng)高(gāo)是默認字體(tǐ)的1.231倍。對于中文來(lái)說，常用的字體(tǐ)大(dà)小(xiǎo)12px、14px、16px、18px等偶數(shù)大(dà)小(xiǎo)，在IE6和(hé)IE7設置其行(xíng)高(gāo)也為(wèi)偶數(shù)能解決一些(xiē)特殊情況下的字體(tǐ)對其問題。 在IE6和(hé)IE7中，行(xíng)高(gāo)值必須大(dà)于字體(tǐ)的2px才能保證字體(tǐ)的完整顯示或當其作(zuò)為(wèi)鏈接時(shí)能有(yǒu)效顯示下劃線。 設置line-height時(shí)，注意不要使用單位（包括%在內(nèi)），因為(wèi)子節點會(huì)繼承經過運算(suàn)後的line-height值，所以當使用單位後浏覽器(qì)會(huì)把line-height計(jì)算(suàn)成第一次定義的絕對值，而不會(huì)随着字體(tǐ)大(dà)小(xiǎo)的變化而變化，而無單位的數(shù)值表示是所在容器(qì)的font-size的倍數(shù)，所以設置為(wèi)無單位的數(shù)值是最佳選擇。

深入CSS 行(xíng)高(gāo)非常有(yǒu)利于理(lǐ)解line-height，值得(de)一讀。

性能和(hé)效率

大(dà)部分平台都有(yǒu)arial，減少(shǎo)浏覽器(qì)的查找時(shí)間(jiān)。

代碼最少(shǎo)，書(shū)寫方便。arial基本上(shàng)是名字最短(duǎn)的字體(tǐ)了，可(kě)以節約CSS的大(dà)小(xiǎo)。

所有(yǒu)的字母都小(xiǎo)寫，目前Google就是這樣做(zuò)的，好處是既可(kě)以編寫更快也能提升Gzip壓縮的效率。

中文最好用unicode表示，比如使用宋體(tǐ)是{font-family:\5b8b\4f53;}，使用微軟雅黑(hēi)是{font-family:\5fae\8f6f\96c5\9ed1;}，這樣的好處是避免編碼問題，同時(shí)能得(de)到所有(yǒu)的主流浏覽器(qì)的支持。 使用正确的字體(tǐ)種類寫法，避免使用引号，這樣可(kě)以縮小(xiǎo)CSS的大(dà)小(xiǎo)。中文字體(tǐ)可(kě)以按上(shàng)一條方式來(lái)編寫。

 未來(lái)

通(tōng)過對中英文及符号混排的測試， 我發現微軟雅黑(hēi)其實表現相當不錯，包括英文數(shù)字和(hé)英文字符以及在IE6和(hé)IE7的顯示效果上(shàng)，但(dàn)唯一的遺憾是在XP下如果安裝了微軟雅黑(hēi)字體(tǐ)的用戶沒有(yǒu)打 開(kāi)“使用屏幕字體(tǐ)的邊緣平滑”選項的話(huà)，在firefox、Safari和(hé)Opera、特别是IE6下會(huì)非常模糊難以辨認。針對這個(gè)問題目前并沒有(yǒu)很(hěn)好的 解決方案，所以隻有(yǒu)等到IE6使用比率非常小(xiǎo)的時(shí)候才可(kě)能正式的使用它。或許需要到2014年，XP死掉的時(shí)候。

雖然很(hěn)早就有(yǒu)了@font-face，但(dàn)是浏覽器(qì)的支持、網速和(hé)商業問題，導緻它很(hěn)少(shǎo)被應用。最近關于字體(tǐ)的好消息是Firefox3.6将支持Web Open Font Forma。關于Web字體(tǐ)未來(lái)的相關信息可(kě)以看Web 字體(tǐ)的未來(lái)、關于 Web 字體(tǐ)：現狀與未來(lái)和(hé)再談 Web 字體(tǐ)的現狀與未來(lái)。