5月微軟正式提供了Windows XP下可用的雅黑字型下載。雅黑字體是一款近乎完美的字體,解決了宋體小文字無法辯認的問題,特別是對於液晶顯示器(LCD),在開啟ClearType效果之後,你就會得到一個更加完美的視覺享受。我現在已經對雅黑著迷了,回頭看預設是宋體的系統,鋸齒太明顯了,很醜。
但這樣隨之而來的問題是,雅黑字體會對Internet Explorer中的網頁版面顯示有些錯位影響。目前我發現的問題主要存在於兩個方面。
一、底線有時變成了刪除線
其實這是一種視覺錯位,並不是真正的刪除線,在有英文和中文混排的段落中,下劃線會被折斷,變得相當不規則。
下面是google.cn首頁的中文文字超級連結:
這個現像只會出現在中文字體中,英文字體不受影響:
如果有中英文混排的情況,就更加明顯了:
可以看出,有中文的地方底線都上移的,英文沒有受到影響。
二、Internet Explorer中行高有變化
下面是我的部落格中對一個有背景圖片的超級連結的截圖:
原來在宋體下正常的樣式,現在在下面露出來了一塊,這說明在Internet Explorer中行高增加了。但是在Firefox中並沒有發生變化。
三、嘗試解決
在Google.cn的截圖中我們發現,右邊的「登入」超級連結是正常的,這說明不是所有的中文超級連結都存在這樣的問題,我仔細對照了一下他們樣式上的差異,發現左邊的連結比右邊的「登入」多了一個樣式:
vertical-align:top;
我把這個屬性屏蔽掉之後一切正常。兩樣在第三張來自「魅族論壇」的這張截圖中,我發現在雖然它沒有在文字樣子中出現vertical-align,但是在後面的兩個小圖片中有:
vertical-align:middle;
去掉這兩張圖片後,一切又正常了。
因此可以肯定,在中文的超級連結中使用vertical-align會出現問題(並不是每個元素都有vertical-align屬性),最簡單的解決方法就是,避免使用vertical-align或valign,或避免使用超級連結的底線。當然這不是正確處理問題的好方法
至於在我博客中再現的這個問題,恰恰說明雅黑字體導致Internet Explorer(Firefox顯示正常)中行高的增加,要解決這個問題,只需要控制得的高度就可以了,但是是一個行內元素,沒能設定高度,所以要配合disaply:block,然後再固定高度(不過,設定了block屬性之後可能會產生自動換行,這時候你就要結合使用float等屬性了) 。我發現這個方法也能解決上面的問題,所以為超級連結固定高度會是比較好的方法。
額外說明:我是在Windows XP的基礎上修改了預設字體,可能會因此而產生一些問題,上面我列舉的兩類問題我很難斷定是由於雅黑字體本身引起的,還是其它不正確設定引起的。暫時沒有找到Vista系統測試是否同樣有這樣的問題,如果哪位有條件可以幫忙測試一下。
註:這個問題存在於Internet Explorer的各個版本中,Firefox不受影響。