這篇文章主要介紹了網(wǎng)頁設(shè)計中如何解決網(wǎng)頁中英文混排行高問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司專注于府谷企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站建設(shè)。府谷網(wǎng)站建設(shè)公司,為府谷等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站建設(shè)，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

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

癥狀描述：在ie下（6或7，8沒有試過）當(dāng)出現(xiàn)中英文混排，都采用默認(rèn)字體時，并使用 li 列表做float時，會出現(xiàn)如上圖的癥狀，文字排列上下不對齊的情況。影響了布局的美觀性，造成上圖情況的原因是中英文的文字基線不同，arial字體的下邊緣要比宋體（同為12號）低一個象素，上邊緣比宋體矮兩個象素，而且英文還有i,y這種上下基線不同的情況。所以當(dāng)中英文混排對齊時，就會出現(xiàn)明顯的高度差異，使排版不均?？梢姺糯髨D。

采用中英文字均使用宋體的方案

可以解決文字排列不對齊的情況，但宋體英文字是襯線字體（Times New Roman即是英文中的襯線字)，字型緊湊，細(xì)節(jié)較多，排列在一起很醒目，但在連續(xù)成文時，容易造成辨識困繞，看錯行的情況。關(guān)于襯線字體的優(yōu)缺點(diǎn)，請見這篇文章。相比之下，表示英文還是使用無襯線字體更美觀大方。
解決方法一 “餃子”童鞋的 發(fā)現(xiàn)。
英文采用tahoma字體–宋體，arial及 tahoma字體比較–arial與tahoma的無襯線體比較精致

當(dāng)中英文混排時，使用tahoma字體的情形

中英混排，純中文組合的行高都一致了，但a在hover狀態(tài)下下劃線與中文粘聯(lián)在一起。
缺陷：使用tahoma字體時，在ie6及ie6以下版本，會導(dǎo)致所有中文字體鏈接的下劃線會出現(xiàn)與字體粘連現(xiàn)象。淘寶使用的也是這一解決方案。相信大型項目，不同的人來共同完成一個頁面的模塊時，在統(tǒng)一的規(guī)范下，使字體更規(guī)范，減少錯位，而采用帶有下劃線會出現(xiàn)與字體粘連的tahoma字體，是值得的
以下是攜同大米童鞋 發(fā)現(xiàn)的：
英文采用arial字體，中文使用宋體。可在<a>標(biāo)簽內(nèi)注明 line-height:1.231,可解決行高不等以及字體與下劃線粘連問題。（不知道大范圍中英文混排適不適用，有待后續(xù)校驗。）

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“網(wǎng)頁設(shè)計中如何解決網(wǎng)頁中英文混排行高問題”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)站名稱：網(wǎng)頁設(shè)計中如何解決網(wǎng)頁中英文混排行高問題
分享網(wǎng)址：http://www.rwnh.cn/article8/psjdop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、微信小程序、網(wǎng)站營銷、網(wǎng)站策劃、ChatGPT、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)