網頁設計中的默認字體樣式詳解

瀏覽器默認的樣式每每在不一樣的瀏覽器、不一樣的語言版本甚至不一樣的系統版本都有不一樣的設置，這就致使如 果直接利用默認樣式的頁面在各個瀏覽器下顯示很是不一致，因而就有了相似YUI的reset 之類用來儘可能重寫瀏覽器的默認設置保證各個瀏覽器樣式一致性的作法。

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

樣式優先級

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

• 第一層是瀏覽器的默認樣式
• 第二層是網頁定義樣式
• 第三層是用戶自定義樣式

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

字體：arial 

咱們頁面的絕大部份內容字符都是中文，毫無疑問目前爲止在網頁上最經常使用也是最通用的顯示中文的字體是宋體，可是宋體在顯示英文、數字和英文符號時過於糟糕 ，好比©字符，因此咱們通常指望經過CSS來實現用更好的字體樣式來顯示它們，而後用宋體來顯示中文和中文符號。之因此選擇arial是由於：

1. Windows和Mac都預裝了這款字體，應該是使用最普遍的網頁字體了。它的潛在對手tahoma和helvetica就沒有這麼幸運了。
2. 視覺設計的專業人士可能會認爲在Windows中使用tahoma、在Mac中使用helvetica 更好，好比淘寶的默認字體樣式 是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
   這是一個很不錯的選擇，可是你也會發現Google、YAHOO、Youtube、Bing甚至MSN的新版 都使用arial做爲第一默認字體。因此從美觀和可讀性上來說arial應該是徹底能夠接受的。
3. 通常狀況下設置font-family都會在最後設置通用字體族 以保證其安全性，好比Google的設置爲font-family:arial,sans-serif;，可是至少在非中文版的Win7下當編碼是GBK時，IE8會因sans-serif來渲染宋體，致使字體出現變形，這就是爲何淘寶須要在sans-serif前加上宋體而Google無需這樣作的緣由。
4. 由於中文字體的選擇很是有限，因此目前全部的主流瀏覽器都設置使用宋體來顯示中文。Baidu的首頁和搜索結果頁使用font-family:arial;能夠從側面說明這樣作的安全性。可能有人注意到Firefox中國版 默認顯示的中文字體是微軟雅黑，這是由於謀智網絡擅自修改了用戶自定義樣式，不容許網頁的樣式覆蓋瀏覽器設置的樣式。也是因爲相似的狀況，咱們要彈性設計網頁很是重要。

使用英文字體做爲第一默認字體會致使的問題之一就是中英文以及符號混排時的對齊問題 、經過設置行高和hasLayout能解決絕大部分狀況，可是都不會很完美，若是把字體改爲「宋體」能完全的解決問題。很明顯，這個問題只出如今IE上。因此，若是你的網站不多使用英文、數字和英文符號，那麼直接設置{font-family:\5b8b\4f53;}也是很合理的選擇。

大小：12px 

1. 12px是宋體能顯示的極限，雖然微軟雅黑能顯示更小的字體 ，但目前的應用環境還沒有成熟。因爲宋體基本上是目前顯示中文惟一的通用Web字體，因此12px成爲最經常使用的字體大小。咱們固然能夠依據產品的須要來修改這個默認值。
2. 不用考慮基於字體大小（em）的設計 。
3. 在Chrome3.0以後的中文版中，字體大小最小值是12px，好比你設置最小字體爲10px，最後也變成12px。

行高：1.5 倍

1. 這是一個經驗值，不一樣的產品對這個值要求可能不一樣，但咱們通常會設置最經常使用的爲默認值。好比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設置其行高也爲偶數能解決一些特殊狀況下的字體對其問題。
2. 在IE6和IE7中，行高值必須大於字體的2px才能保證字體的完整顯示或當其做爲連接時能有效顯示下劃線。
3. 設置line-height時，注意不要使用單位（包括%在內） ，由於子節點會繼承通過運算後的line-height值，因此當使用單位後瀏覽器會把line-height計算成第一次定義的絕對值，而不會隨着字體大小的變化而變化，而無單位的數值表示是所在容器的font-size的倍數，因此設置爲無單位的數值是最佳選擇。
4. 深刻CSS 行高 很是有利於理解line-height，值得一讀。

性能和效率

1. 大部分平臺都有arial，減小瀏覽器的查找時間。
2. 代碼最少，書寫方便。arial基本上是名字最短的字體了，能夠節約CSS的大小。
3. 全部的字母都小寫，目前Google就是這樣作的，好處是既能夠編寫更快也能提高Gzip壓縮的效率。
4. 中文最好用unicode表示 ，好比使用宋體是{font-family:\5b8b\4f53;}，使用微軟雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，這樣的好處是避免編碼問題，同時能獲得全部的主流瀏覽器的支持。
5. 使用正確的字體種類寫法，避免使用引號 ，這樣能夠縮小CSS的大小。中文字體能夠按上一條方式來編寫。

1. 經過對中英文及符號混排的測試 ， 我發現微軟雅黑其實表現至關不錯，包括英文數字和英文字符以及在IE6和IE7的顯示效果上，但惟一的遺憾是在XP下若是安裝了微軟雅黑字體的用戶沒有打 開「使用屏幕字體的邊緣平滑」選項的話，在firefox 、Safari和Opera、特別是IE6下會很是模糊難以辨認。針對這個問題目前並無很好的 解決方案，因此只有等到IE6使用比率很是小的時候纔可能正式的使用它。或許須要到2014年，XP死掉的時候。
2. 雖然很早就有了@font-face，可是瀏覽器的支持、網速和商業問題，致使它不多被應用。最近關於字體的好消息是Firefox3.6將支持Web Open Font Forma 。關於Web字體將來的相關信息能夠看Web 字體的將來 、關於 Web 字體：現狀與將來 和再談 Web 字體的現狀與將來 。

原文地址: 默認Web字體樣式 @ 隨網之舞 
有興趣的朋友還能夠看一下另外一篇針對該文進行補充的《再談 Web 默認字體》