網頁設計雅黑字體對IE顯示網頁佈局的影響

網頁設計雅黑字體對IE顯示網頁佈局的影響

發佈者:SEO香港優化專家 - Web Design

網站設計 　　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不受影響。 網頁寄存