|
基本上快被這個(gè)問題搞瘋了，癥狀如下
癥狀描述：在ie下（6或7，8沒有試過）當(dāng)出現(xiàn)中英文混排，都采用默認(rèn)字體時(shí)，并使用 li 列表做float時(shí)，會(huì)出現(xiàn)如上圖的癥狀，文字排列上下不對(duì)齊的情況。影響了布局的美觀性，造成上圖情況的原因是中英文的文字基線不同，arial字體的下邊緣要比宋體（同為12號(hào)）低一個(gè)象素，上邊緣比宋體矮兩個(gè)象素，而且英文還有i,y這種上下基線不同的情況。所以當(dāng)中英文混排對(duì)齊時(shí)，就會(huì)出現(xiàn)明顯的高度差異，使排版不均�？梢姺糯髨D。
采用中英文字均使用宋體的方案
可以解決文字排列不對(duì)齊的情況，但宋體英文字是襯線字體（Times New Roman即是英文中的襯線字)，字型緊湊，細(xì)節(jié)較多，排列在一起很醒目，但在連續(xù)成文時(shí)，容易造成辨識(shí)困繞，看錯(cuò)行的情況。關(guān)于襯線字體的優(yōu)缺點(diǎn)，請(qǐng)見這篇文章。相比之下，表示英文還是使用無襯線字體更美觀大方。
解決方法一 “餃子”童鞋的 發(fā)現(xiàn)。
英文采用tahoma字體–宋體，arial及 tahoma字體比較–arial與tahoma的無襯線體比較精致
當(dāng)中英文混排時(shí)，使用tahoma字體的情形
中英混排，純中文組合的行高都一致了，但a在hover狀態(tài)下下劃線與中文粘聯(lián)在一起。
缺陷：使用tahoma字體時(shí)，在ie6及ie6以下版本，會(huì)導(dǎo)致所有中文字體鏈接的下劃線會(huì)出現(xiàn)與字體粘連現(xiàn)象。淘寶使用的也是這一解決方案。相信大型項(xiàng)目，不同的人來共同完成一個(gè)頁面的模塊時(shí)，在統(tǒng)一的規(guī)范下，使字體更規(guī)范，減少錯(cuò)位，而采用帶有下劃線會(huì)出現(xiàn)與字體粘連的tahoma字體，是值得的
以下是攜同大米童鞋 發(fā)現(xiàn)的：
英文采用arial字體，中文使用宋體。可在<a>標(biāo)簽內(nèi)注明 line-height:1.231,可解決行高不等以及字體與下劃線粘連問題。（不知道大范圍中英文混排適不適用，有待后續(xù)校驗(yàn)。）
總結(jié)：感謝大米，感謝餃子，感謝YUI，感謝淘寶！
本文鏈接：http://www.95time.cn/design/doc/2008/6131.asp 
出處：口碑網(wǎng)UED Team
責(zé)任編輯：bluehearts
|
