秦歌(YanKaven) 的站點:http://dancewithnet.com/
默認Web字體樣式
通常用戶看到的頁面的樣式會受到三層控制,第一層是浏覽器的默認樣式,第二層是網頁定義樣式,第三層是用戶自定義樣式。和CSS一樣,後面的優先級高於前面的,也就是說網頁定義樣式可以覆蓋浏覽器的默認樣式,而用戶自定義樣式優先級最高。實際情況是雖然浏覽器都或多或少提供了用戶自定義樣式的功能,但是極少數會有用戶去自定義,一般用也是高級用戶。而浏覽器默認的樣式往往在不同的浏覽器、不同的語言版本甚至不同的系統版本都有不同的設置,這就導致如果直接利用默認樣式的頁面在各個浏覽器下顯示非常不一致,於是就有了類似YUI的reset之類用來盡量重寫浏覽器的默認設置保證各個浏覽器樣式一致性的做法。
拿字體來說,各個浏覽器默認的字體種類、字體大小和字體行高都不一樣,比如IE8的中文版在Windows XP下顯示網頁時默認字體是宋體,而英文版肯定不會如此。所以我們需要統一設置默認的字體樣式,以便實現一致的顯示效果來保證設計的一致性和提高開發效率。
以後准備使用如下默認字體樣式:
body{
font: 12px/1.5 arial;
}
我們頁面的絕大部分內容字符都是中文,毫無疑問目前為止在網頁上最常用也是最通用的顯示中文的字體是宋體,但是宋體在顯示英文、數字和英文符號時過於糟糕,比如©字符,所以我們一般期望通過CSS來實現用更好的字體樣式來顯示它們,然後用宋體來顯示中文和中文符號。之所以選擇arial是因為:
tahoma
和helvetica
就沒有這麼幸運了。font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
這是一個很不錯的選擇,但是你也會發現Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial
作為第一默認字體。所以從美觀和可讀性上來講arial
應該是完全可以接受的。font-family:arial,sans-serif;
,但是至少在非中文版的Win7下當編碼是GBK時,IE8會因sans-serif
來渲染宋體,導致字體出現變形,這就是為什麼淘寶需要在sans-serif
前加上宋體而Google無需這樣做的原因。font-family:arial;
可以從側面說明這樣做的安全性。可能有人注意到Firefox中國版默認顯示的中文字體是微軟雅黑,這是因為謀智網絡擅自修改了用戶自定義樣式,不允許網頁的樣式覆蓋浏覽器設置的樣式。也是由於類似的情況,我們要彈性設計網頁非常重要。使用英文字體作為第一默認字體會導致的問題之一就是中英文以及符號混排時的對齊問題、通過設置行高和hasLayout能解決絕大部分情況,但是都不會很完美,如果把字體改成“宋體”能徹底的解決問題。很明顯,這個問題只出現在IE上。所以,如果你的網站很少使用英文、數字和英文符號,那麼直接設置{font-family:\5b8b\4f53;}
也是很合理的選擇。
font:13px/1.231 arial,helvetica,clean,sans-serif;
即字體大小默認值是13px,行高是13*1.231=16.003px,默認的行高是默認字體的1.231倍。對於中文來說,常用的字體大小12px、14px、16px、18px等偶數大小,在IE6和IE7設置其行高也為偶數能解決一些特殊情況下的字體對其問題。line-height
時,注意不要使用單位(包括%在內),因為子節點會繼承經過運算後的line-height值,所以當使用單位後浏覽器會把line-height
計算成第一次定義的絕對值,而不會隨著字體大小的變化而變化,而無單位的數值表示是所在容器的font-size
的倍數,所以設置為無單位的數值是最佳選擇。line-height
,值得一讀。arial
,減少浏覽器的查找時間。arial
基本上是名字最短的字體了,可以節約CSS的大小。{font-family:\5b8b\4f53;}
,使用微軟雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}
,這樣的好處是避免編碼問題,同時能得到所有的主流浏覽器的支持。最後推薦一下玉伯的《再談 Web 默認字體》