CSS網頁布局中預設字型樣式

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

　　樣式優先順序

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

　　第一層是瀏覽器的預設樣式

　　第二層是網頁定義樣式

　　第三層是使用者自訂樣式

　　和CSS一樣，後面的優先順序 高於前面的，也就是說網頁定義樣式可以覆蓋瀏覽器的預設樣式，而使用者自訂樣式優先順序最高。不過，當有 !important 時，網頁樣式可以覆蓋使用者自訂樣式。使用者!important > 網頁!important > 使用者 > 網頁 > 瀏覽器預設。

　　字型：arial

　　我們頁面的絕大部分內容字元都是中文，毫無疑問目前為止在網頁上最常用也是最通用的顯示中文的字型是宋體，但是宋體在顯示英文、數字和英文符號時過於糟糕，比如©字元，所以我們一般期望通過CSS來實現用更好的字型樣式來顯示它們，然後用宋體來顯示中文和中文符號。之所以選擇arial是因為：

　　Windows和Mac都預裝了這款字型，應該是使用最廣泛的網頁字型了。它的潛在對手tahoma和helvetica就沒有這麼幸運了。

　　視覺設計的專業人士可能會認為在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘寶的預設字型樣式是font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", 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:5b8b4f53;}也是很合理的選擇。

　　大小：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:5b8b4f53;}，使用微軟雅黑是{font-family:5fae8f6f96c59ed1;}，這樣的好處是避免編碼問題，同時能得到所有的主流瀏覽器的支援。

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

　　未來

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

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