通常使用者看到的頁面的樣式會受到三層控制,第一層是瀏覽器的預設樣式,第二層是網頁定義樣式,第三層是使用者自訂樣式。和CSS一樣,後面的優先權高於前面的,也就是說網頁定義樣式可以覆寫瀏覽器的預設樣式,而使用者自訂樣式優先權最高。實際情況是雖然瀏覽器都或多或少提供了用戶自訂樣式的功能,但是極少數會有用戶去自訂,一般用也是高級用戶。而瀏覽器預設的樣式往往在不同的瀏覽器、不同的語言版本甚至不同的系統版本都有不同的設置,這就導致如果直接利用預設樣式的頁面在各個瀏覽器下顯示非常不一致,於是就有了類似YUI的reset之類用來盡量重寫瀏覽器的預設設定保證各個瀏覽器樣式一致性的做法。
拿字體來說,各瀏覽器預設的字型種類、字型大小和字型行高都不一樣,例如IE8的中文版在Windows XP下顯示網頁時預設字型是宋體,而英文版絕對不會如此。所以我們需要統一設定預設的字體樣式,以便實現一致的顯示效果來確保設計的一致性和提高開發效率。
以後準備使用以下預設字體樣式:
body{ font: 12px/1.5 arial; }
我們頁面的絕大部分內容字符都是中文,毫無疑問目前為止在網頁上最常用也是最通用的顯示中文的字體是宋體,但是宋體在顯示英文、數字和英文符號時過於糟糕,比如©字符,所以我們通常期望透過CSS來實現用更好的字體樣式來顯示它們,然後用宋體來顯示中文和中文符號。之所以選擇arial是因為:
tahoma
和helvetica
就沒有這麼幸運了。font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", 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:5b8b4f53;}
也是很合理的選擇。
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:5b8b4f53;}
,使用微軟雅黑是{font-family:5fae8f6f96c59ed1;}
,這樣的好處是避免編碼問題,同時能得到所有的主流瀏覽器的支援。