網頁設計技巧:網頁中英文混排行高問題

來源:互聯網
上載者:User

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

癥狀描述:在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字型,中文使用宋體。可在<a>標籤內註明 line-height:1.231,可解決行高不等以及字型與底線粘連問題。(不知道大範圍中英文混排適不適用,有待後續校正。)

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



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。