雅黑字體對(duì)IE中的網(wǎng)頁布局的影響

2024-07-11 08:42:59

字體：大中小

供稿：網(wǎng)友

5月20日，微軟正式提供了Windows XP下可用的雅黑字體下載，雅黑字體是一款近乎完美的字體，解決了宋體小文字無法辯認(rèn)的問題，特別是對(duì)于液晶顯示器（LCD），在開啟ClearType效果之后，你就會(huì)得到一個(gè)更加完美的視覺享受。我現(xiàn)在已經(jīng)對(duì)雅黑著迷了，回頭看默認(rèn)為宋體的系統(tǒng)，鋸齒太明顯了，很丑。
但是這樣隨之而來的問題是，雅黑會(huì)對(duì)Internet Explorer中的布局頁面影響。目前我發(fā)現(xiàn)的問題主要存在于兩個(gè)方面：
一、下劃線有時(shí)變成了刪除線（視覺錯(cuò)位，并不是真正的刪除線），在有英文和中文混排的段落中，下劃線會(huì)被折斷，變得相當(dāng)不規(guī)則。
下面是google.cn首頁的中文文字超級(jí)鏈接：

這個(gè)現(xiàn)象只會(huì)出現(xiàn)在中文字體中，英文字體不受影響：

如果有中英文混排的情況，就更加明顯了：

可以看出，有中文的地方下劃線都上移的，英文沒有受到影響。
二、Internet Explorer中行高的變化
下面是我的博客中對(duì)一個(gè)有背景圖片的超級(jí)鏈接的截圖：

原來在宋體下正常的樣式，現(xiàn)在在下面露出來了一塊，這說明在Internet Explorer中行高增加了。但是在Firefox中并沒有發(fā)生變化。
三、嘗試解決
在Google.cn的截圖中我們發(fā)現(xiàn)，右邊的“登錄”超級(jí)鏈接是正常的，這說明不是所有的中文超級(jí)鏈接都存在這樣的問題，我仔細(xì)對(duì)照了一下他們樣式上的差異，發(fā)現(xiàn)左面的鏈接比右面的“登錄”多了一個(gè)樣式：
vertical-align:top;
我把這個(gè)屬性屏蔽掉之后一切正常。兩樣在第三張來自“魅族論壇”的這張截圖中，我發(fā)現(xiàn)在雖然它沒有在文字樣子中出現(xiàn)vertical-align，但是在后面的兩個(gè)小圖片中有：
vertical-align:middle;
去掉這兩個(gè)圖片后，一切又正常了。
因此可以肯定，在中文的超級(jí)鏈接中使用vertical-align會(huì)出現(xiàn)問題（并不是每個(gè)元素都有vertical-align屬性），最簡單的解決方法就是，避免使用vertical-align或者valign，或者避免使用超級(jí)鏈接的下劃線。當(dāng)然這不是正確處理問題的好方法
至于在我博客中再現(xiàn)的這個(gè)問題，恰恰說明雅黑字體導(dǎo)致Internet Explorer（Firefox顯示正常）中行高的增加，要解決這個(gè)問題，只需要控制得的高度就可以了，但是<a>是一個(gè)行內(nèi)元素，沒能設(shè)置高度，所以要配合disaply:block，然后再固定高度（不過，設(shè)置了block屬性之后可能會(huì)產(chǎn)生自動(dòng)換行，這時(shí)候你就要結(jié)合使用float等屬性了）。我發(fā)現(xiàn)這個(gè)方法也能解決上面的問題，所以為超級(jí)鏈接固定高度會(huì)是比較好的方法。
額外說明：我是在Windows XP的基礎(chǔ)上修改了默認(rèn)字體，可能會(huì)因此而產(chǎn)生一些問題，上面我列舉的兩類問題我很難斷定是由于雅黑字體本身引起的，還是其它不正確設(shè)置引起的。暫時(shí)沒有找到Vista系統(tǒng)測(cè)試是否同樣存在這樣的問題，如果哪位有條件可以幫忙測(cè)試一下。
另外：這個(gè)問題存在于Internet Explorer的各個(gè)版本中，F(xiàn)irefox不受影響。
原文連接：http://www.dudo.org/article.asp?id=245

上一篇：最常用的五類CSS選擇器

下一篇：CSS技巧：改善代碼可讀性并簡化代碼管理