首頁 > web前端 > css教學 > 主體

網頁中英文混排行高不等問題的解決方法_經驗交流

WBOY
發布: 2016-05-16 12:05:06
原創
1852 人瀏覽過

基本上快被這個問題搞瘋了,症狀如下

網頁中英文混排行高不等問題的解決方法_經驗交流

症狀描述:在ie下(6或7,8沒有試過)當出現中英文混排,都採用預設字體時,並使用li 列表做float時,會出現如上圖的症狀,文字排列上下不對齊的情況。影響了佈局的美觀性,造成上圖情況的原因是中英文的文字基線不同,arial字體的下邊緣要比宋體(同為12號)低一個像素,上邊緣比宋體矮兩個像素,而且英文還有i,y這種上下基線不同的情況。所以當中英文混排對齊時,就會出現明顯的高度差異,使排版不均。可見放大圖。

網頁中英文混排行高不等問題的解決方法_經驗交流

採用中英文字皆使用宋體的方案

網頁中英文混排行高不等問題的解決方法_經驗交流

可以解決文字排列不對齊的情況,但宋體英文字是襯線字體(Times New Roman即英文中的襯線字),字型緊湊,細節較多,排列在一起很醒目,但在連續成文時,容易造成辨識困繞,看錯行的情況。 關於襯線字體的優缺點,請見這篇文章。相較之下,表示英文還是使用無襯線字體更美觀大方。

解決方法一 “餃子”童鞋的 發現。

英文採用tahoma字體–宋體,arial及 tahoma字體比較–arial與tahoma的無襯線體較為精緻

網頁中英文混排行高不等問題的解決方法_經驗交流

當中英文混排時,使用tahoma字體的情形

網頁中英文混排行高不等問題的解決方法_經驗交流

中英混排,純中文組合的行高都一致了,但a在hover狀態下劃線與中文粘聯在一起。

缺陷:使用tahoma字體時,在ie6及ie6以下版本,會導致所有中文字體連結的下劃線會出現與字體黏連現象。淘寶使用的也是這個解決方案。相信大型項目,不同的人來共同完成一個頁面的模組時,在統一的規範下,使字體更規範,減少錯位,而採用帶有下劃線會出現與字體粘連的tahoma字體,是值得的

以下是攜同米童鞋 發現的

英文採用arial字體,中文使用宋體。可在標籤內註明 line-height:1.231,可解決行高不等以及字體與下劃線黏連問題。 (不知道大範圍中英文混排適不適用,有待後續校驗。)

網頁中英文混排行高不等問題的解決方法_經驗交流

總結:感謝米,感謝餃子,感謝YUI,感謝淘寶!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!