解析CSS設置默認字體樣式（轉）

默認字體樣式會因為瀏覽器不同，版本不同，甚至操作系統不同的設置不同導致如果直接利用默認樣式的頁面在各個瀏覽器下顯示非常不一致，于是就有了類似YUI的reset之類用來盡量重寫瀏覽器的默認設置保證各個瀏覽器樣式一致性的做法。 拿字體來說，各個瀏覽器默認的字體種類、字體大小和字體行高都不一樣，比如IE8的中文版在Windows XP下顯示網頁時默認字體是宋體，而英文版肯定不會如此。所以我們需要統一設置默認的字體樣式，以便實現一致的顯示效果來保證設計的一致性和提高開發效率。

默認字體樣式會因為瀏覽器不同，版本不同，甚至操作系統不同的設置不同導致如果直接利用默認樣式的頁面在各個瀏覽器下顯示非常不一致，于是就有了類似YUI 的 reset 之類用來盡量重寫瀏覽器的默認設置保證各個瀏覽器樣式一致性的做法。

拿字體來說，各個瀏覽器默認的字體種類、字體大小和字體行高都不一樣，比如 IE8 的中文版在 Windows XP 下顯示網頁時默認字體是宋體，而英文版肯定不會如此。所以我們需要統一設置默認的字體樣式，以便實現一致的顯示效果來保證設計的一致性和提高開發效率。

 

樣式優先級

通常用戶看到的頁面的樣式會受到三層控制:

第一層是瀏覽器的默認樣式

第二層是網頁定義樣式

第三層是用戶自定義樣式

和 CSS 一樣，后面的優先級高于前面的，也就是說網頁定義樣式可以覆蓋瀏覽器的默認樣式，而用戶自定義樣式優先級最高。不過，當有 !important 時，網頁樣式可以覆蓋用戶自定義樣式。用戶!important > 網頁!important > 用戶 > 網頁 > 瀏覽器默認。

 

字體：arial

我們頁面的絕大部分內容字符都是中文，毫無疑問目前為止在網頁上最常用也是最通用的顯示中文的字體是宋體，但是宋體在顯示英文、數字和英文符號時過于糟糕，比如?字符，所以我們一般期望通過 CSS 來實現用更好的字體樣式來顯示它們，然后用宋體來顯示中文和中文符號。之所以選擇 arial 是因為：Windows 和 Mac 都預裝了這款字體，應該是使用最廣泛的網頁字體了。它的潛在對手 tahoma 和 helvetica 就沒有這么幸運了。

視覺設計的專業人士可能會認為在 Windows 中使用 tahoma、在 Mac 中使用 helvetica 更好，比如淘寶的默認字體樣式是 font:12px/1 Tahoma,Helvetica,Arial,”\5b8b\4f53″,sans-serif;

這是一個很不錯的選擇，但是你也會發現 Google、YAHOO、Youtube、Bing 甚至 MSN 的新版都使用 arial 作為第一默認字體。所以從美觀和可讀性上來講 arial 應該是完全可以接受的。

一般情況下設置 font-family 都會在最后設置通用字體族以保證其安全性，比如 Google 的設置為 font-family:arial,sans-serif;，但是至少在非中文版的 Win7 下當編碼是 GBK 時，IE8 會因 sans-serif 來渲染宋體，導致字體出現變形，這就是為什么淘寶需要在 sans-serif 前加上宋體而 Google 無需這樣做的原因。因為中文字體的選擇非常有限，所以目前所有的主流瀏覽器都設置使用宋體來顯示中文。Baidu 的首頁和搜索結果頁使用 font-family:arial; 可以從側面說明這樣做的安全性。可能有人注意到 Firefox 中國版默認顯示的中文字體是微軟雅黑，這是因為謀智網絡擅自修改了用戶自定義樣式，不允許網頁的樣式覆蓋瀏覽器設置的樣式。也是由于類似的情況，我們要彈性設計網頁非常重要。

使用英文字體作為第一默認字體會導致的問題之一就是中英文以及符號混排時的對齊問題、通過設置行高和 hasLayout 能解決絕大部分情況，但是都不會很完美，如果把字體改成“宋體”能徹底的解決問題。很明顯，這個問題只出現在IE上。所以，如果你的網站很少使用英文、數字和英文符號，那么直接設置 {font-family:\5b8b\4f53;} 也是很合理的選擇。

 

大小：12px

12px 是宋體能顯示的極限，雖然微軟雅黑能顯示更小的字體，但目前的應用環境尚未成熟。由于宋體基本上是目前顯示中文唯一的通用Web字體，所以12px成為最常用的字體大小。我們當然可以依據產品的需要來修改這個默認值。

不用考慮基于字體大小（em）的設計。

在 Chrome3.0 之后的中文版中，字體大小最小值是12px，比如你設置最小字體為10px，最后也變成12px。

 

行高：1.5倍

這是一個經驗值，不同的產品對這個值要求可能不同，但我們一般會設置最常用的為默認值。比如 YUI 的 font 中是 font:13px/1.231 arial,helvetica,clean,sans-serif; 即字體大小默認值是13px，行高是13*1.231=16.003px，默認的行高是默認字體的1.231倍。對于中文來說，常用的字體大小12px、14px、16px、18px等偶數大小，在 IE6 和 IE7 設置其行高也為偶數能解決一些特殊情況下的字體對其問題。

在IE6和IE7中，行高值必須大于字體的2px才能保證字體的完整顯示或當其作為鏈接時能有效顯示下劃線。

設置 line-height 時，注意不要使用單位（包括%在內），因為子節點會繼承經過運算后的 line-height 值，所以當使用單位后瀏覽器會把 line-height 計算成第一次定義的絕對值，而不會隨著字體大小的變化而變化，而無單位的數值表示是所在容器的font-size的倍數，所以設置為無單位的數值是最佳選擇。

深入CSS行高非常有利于理解 line-height，值得一讀。

 

性能和效率

大部分平臺都有 Arial，減少瀏覽器的查找時間。

代碼最少，書寫方便。Arial 基本上是名字最短的字體了，可以節約CSS的大小。

所有的字母都小寫，目前 Google 就是這樣做的，好處是既可以編寫更快也能提升 Gzip 壓縮的效率。

中文最好用 unicode 表示，比如使用宋體是 {font-family:\5b8b\4f53;} ，使用微軟雅黑是 {font-family:\5fae\8f6f\96c5\9ed1;} ，這樣的好處是避免編碼問題，同時能得到所有的主流瀏覽器的支持。

使用正確的字體種類寫法，避免使用引號，這樣可以縮小CSS的大小。中文字體可以按上一條方式來編寫。

 

未來

通過對中英文及符號混排的測試，我發現微軟雅黑其實表現相當不錯，包括英文數字和英文字符以及在 IE6 和 IE7 的顯示效果上，但唯一的遺憾是在XP下如果安裝了微軟雅黑字體的用戶沒有打開“使用屏幕字體的邊緣平滑”選項的話，在 Firefox、Safari 和 Opera、特別是 IE6 下會非常模糊難以辨認。針對這個問題目前并沒有很好的解決方案，所以只有等到 IE6 使用比率非常小的時候才可能正式的使用它。或許需要到2014年，XP死掉的時候。

雖然很早就有了@font-face，但是瀏覽器的支持、網速和商業問題，導致它很少被應用。最近關于字體的好消息是 Firefox3.6 將支持 Web Open Font Forma。關于Web字體未來的相關信息可以看Web字體的未來、關于Web字體：現狀與未來和再談Web字體的現狀與未來。