基本上这个问题我都快疯了,症状如下。
说明:在ie下(6或7或8还没试过),中英文混合使用默认字体,li列表作为浮动时,会出现上面显示的症状,文字排列不会上下对齐。影响了版面的美观,造成上述情况的原因是中英文文本基线不同。arial字体下缘比宋体(同12号)低一个像素,上缘比宋体短两个像素。另外,英语有I、y等不同的上下基线,因此中英文混合对齐时,会有明显的高度差异,导致排版不均匀。见放大图。
采用中英文字符都使用宋体的方案。
可以解决文字排列错位的问题,但是宋体的英文字符是衬线字体(倍新罗马体是英文的衬线字符),字体紧凑,细节很多,排列在一起很醒目。但连续书写时,容易造成识别困难和台词误读。请看这篇关于衬线字体优缺点的文章。相比之下,表达英文或使用无衬线字体更优雅。解决方案1:“饺子”童鞋的发现。英文tahoma字体tahoma、arial和tahoma字体的比较Arial和Tahoma无衬线字体更精致。
中英文混合时tahoma字体的使用。
汉英混排和纯中文组合的行高相同,但A的下划线在悬停状态下被中文卡住。缺陷:使用tahoma字体时,会导致所有中文字体链接的下划线与ie6及以下的字体相贴。淘宝也用这个解决方案。相信在大型项目中,当不同的人共同完成一个页面的模块时,在统一的标准下,字体会更加规范,错位也会减少,值得使用带下划线的tahoma字体,会造成与字体的粘连。下面是用米童鞋发现的:英文用arial字体,中文用Tahoma字体。标签A中可以标注行高:1.231,可以解决行高不等,字体与下划线粘连的问题。(不知道大范围的中英混排是否适用,需要后期验证。)9505.163.com
总结:感谢米饭,感谢饺子,感谢YUI,感谢淘宝!