全局字体最佳实践
這是我迄今發(fā)現(xiàn)的最好的全局字體解決方案。當(dāng)然,所謂“最好”,也只是基于我個(gè)人的評(píng)判標(biāo)準(zhǔn)。所以我還是得分析一下其他的寫法有什么缺點(diǎn),最后再總結(jié)這個(gè)寫法的特點(diǎn)。
body {font-family: "宋體", sans-serif; }這個(gè)寫法可能的缺點(diǎn)在于:
1. 宋體在Safari和Vista的IE 7下,看起來很難看。(我稍后把截圖補(bǔ)上)
2. 宋體的英文字很難看。
3. 如果在CSS里寫中文,你得小心你HTML和CSS的編碼是否一致。
這樣寫,可以避免上面的第三個(gè)問題。但是宋體本身確實(shí)很難看。我們希望在不同平臺(tái)下,都用各自默認(rèn)的字體。XP是宋體,Vista是微軟雅黑,Mac是黑體。這樣的話,只能將字體的第一個(gè)設(shè)置為英文字體,這樣遇到中文的時(shí)候,瀏覽器會(huì)自動(dòng)調(diào)用默認(rèn)字體(Vista IE 7的一些版本里貌似默認(rèn)還是宋體,這個(gè)我就無能為力了,交給用戶設(shè)置的自主權(quán)吧)
body {font-family: Tahoma, sans-serif; }這是一個(gè)不錯(cuò)的解決辦法。Tahoma其實(shí)是一個(gè)挺漂亮的字體(我同事喜歡稱它“大河馬”,哈哈)。但是它其實(shí)會(huì)帶來一些問題:
1. 由Tahoma顯示的中文,在IE 6里,下劃線會(huì)緊緊的貼住中文字,很難看。
2. IE 6下,Tahoma無法正確的設(shè)定為13px。它會(huì)跟14px一樣大。但是其他瀏覽器沒有這個(gè)問題。
3. 如果一行里同時(shí)出現(xiàn)中文和英文,且這一行里有元素被定義了vertical-align屬性,在IE 6、7里會(huì)導(dǎo)致文字高低不齊,甚至下劃線錯(cuò)位。
上述兩個(gè)問題,Arial都沒有。但是Arial也有缺點(diǎn):
1. 比Tahoma難看。
2. Tahoma里的第三個(gè)問題也同樣存在。
不過,這個(gè)bug是有個(gè)解決辦法的,就是將這一行定義zoom:1。
所以,如果不嫌難看,定義為Arial是最合適的。如果實(shí)在不喜歡,可以將全局定義為Tahoma,然后再將有下劃線的(如鏈接)文字定義為Arial,至少可以緩解一下。
最后,對(duì)于全局字體,補(bǔ)充一點(diǎn):IE里,所有的表單元素都不繼承body的字體屬性,需要單獨(dú)設(shè)置:
input, label, select, option, textarea, button, fieldset, legend { font-family:Tahoma,sans-serif; }轉(zhuǎn)載于:https://www.cnblogs.com/ddshou/archive/2009/05/05/1449733.html
總結(jié)
- 上一篇: 可以给img元素设置背景图
- 下一篇: flash的运算比较符