Div CSS網頁布局中對字體的控制是非常重要的,對於需要精確效果的頁面而言。這類設置會非常有用。對於一般用戶與開發者而論,使用浏覽器默認字體即可,Webjx.com鮮有這方面的知識的介紹。此文分享了作者很獨特的CSS實踐經驗。從此文可以看出。對頁面字體的控制與設置的思考,將CSS的工作進行的更加深入了。
body {font-family: Arial, sans-serif; } 這是我迄今發現的最好的全局字體解決方案。當然,所謂“最好”,也只是基於我個人的評判標准。所以我還是得分析一下其他的寫法有什麼缺點,最後再總結這個寫法的特點。
body {font-family: "宋體", sans-serif; }
這個寫法可能的缺點在於:
1. 宋體在Safari和Vista的IE 7下,看起來很難看。(我稍後把截圖補上)
2. 宋體的英文字很難看。
3. 如果在CSS裡寫中文,你得小心你Html和CSS的編碼是否一致。
body {font-family: SimSun,sans-serif; }
這樣寫,可以避免上面的第三個問題。但是宋體本身確實很難看。我們希望在不同平台下,都用各自默認的字體。XP是宋體,Vista是微軟雅黑,Mac是黑體。這樣的話,只能將字體的第一個設置為英文字體,這樣遇到中文的時候,浏覽器會自動調用默認字體(Vista IE 7的一些版本裡貌似默認還是宋體,這個我就無能為力了,交給用戶設置的自主權吧)
body {font-family: Tahoma, sans-serif; }
這是一個不錯的解決辦法。Tahoma其實是一個挺漂亮的字體(我同事喜歡稱它“大河馬”,哈哈)。但是它其實會帶來一些問題:
1. 由Tahoma顯示的中文,在IE 6裡,下劃線會緊緊的貼住中文字,很難看。
2. IE 6下,Tahoma無法正確的設定為13px。它會跟14px一樣大。但是其他浏覽器沒有這個問題。
3. 如果一行裡同時出現中文和英文,且這一行裡有元素被定義了vertical-align屬性,在IE 6、7裡會導致文字高低不齊,甚至下劃線錯位。
body {font-family: Arial, ans-serif; }
上述兩個問題,Arial都沒有。但是Arial也有缺點:
1. 比Tahoma難看。
2. Tahoma裡的第三個問題也同樣存在。
不過,這個bug是有個解決辦法的,就是將這一行定義zoom:1。
所以,如果不嫌難看,定義為Arial是最合適的。如果實在不喜歡,可以將全局定義為Tahoma,然後再將有下劃線的(如鏈接)文字定義為Arial,至少可以緩解一下。
最後,對於全局字體,補充一點:
IE裡,所有的表單元素都不繼承body的字體屬性,需要單獨設置:
input, label, select, option, textarea, button, fIEldset, legend {
font-family:Tahoma,sans-serif;
}