展会信息港展会大全

css中英文字母和汉字行高不同解决方法
来源:互联网   发布日期:2016-01-19 12:50:46   浏览:3155次  

导读:最近在写一个css的时候遇到一个问题:英文字母和汉字的行高不一样,导致在全汉字、全英文字母以及汉字字母混合时设置好的margin或 padding 属性出现偏差当然这种情况之存在于IE浏览器,Safari、Google Chro ...

最近在写一个css的时候遇到一个问题:英文字母和汉字的行高不一样,导致在全汉字、全英文字母以及汉字字母混合时设置好的margin或 padding 属性出现偏差 当然这种情况之存在于IE浏览器,Safari、Google Chrome、Firefox、Opera均不存在类似的问题

产生的原因:

全汉字的时候:

一般情况在选中文本可以看出汉字是上对齐的(具体表现是选中字体,从背景上看上去下面多了一部分,用css术语讲就是产生了padding- bottom属性,为了说明问题暂且就说存在padding属性吧)。

全英文字母的时候:

类似于全汉字在全英文的情况下是下对齐,会出现类似padding-top的属性。不管是全汉字还是全英文这时候的行高是一样的。

字母汉字混合:

但是如果把汉字和英文字母混合在一起的时候就可以看出来差别了,这时候再选中所有字体就可以看出来这时候是的补白是 padding=padding-top+padding-bottom,也就是会多出来一个padding-top(也可以说是padding- bottom),一般字体在12px的情况下,多出来的部分大概是2px。

解决办法:

更改字体:

本来想使用line-height固定的,但是line-height是每一行的基线与基线之间的距离,又因为汉字的基线和英文字母是不同的,所以起不到作用,再说如果是用作导航菜单只有一行还是没有用的。

这样只有从字体上下手了,还真有一种字体可以解决这个问题,这个字体就是 simsun , simsun 就是传说已久的 宋体 ,在 windows字体文件夹下 宋体 的文件名就是 simsun ,他的兄弟 simhei 就是通常说的 黑体 。

所以,解决办法就是 把font-family设置成 simsun ,这可能会损失一些效果,没办法如果谁有更好的解决办法可以指教一下。

赞助本站

人工智能实验室

相关热词: 汉字 英文字母 行高 css

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港