网页设计技巧:网页中英文混排行高问题

基本上快被这个问题搞疯了,症状如下

症状描述:在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,感谢淘宝!

时间: 2024-12-03 04:40:33

网页设计技巧:网页中英文混排行高问题的相关文章

网页中英文混排行高不等问题的解决方法_经验交流

基本上快被这个问题搞疯了,症状如下 症状描述:在ie下(6或7,8没有试过)当出现中英文混排,都采用默认字体时,并使用 li 列表做float时,会出现如上图的症状,文字排列上下不对齐的情况.影响了布局的美观性,造成上图情况的原因是中英文的文字基线不同,arial字体的下边缘要比宋体(同为12号)低一个象素,上边缘比宋体矮两个象素,而且英文还有i,y这种上下基线不同的情况.所以当中英文混排对齐时,就会出现明显的高度差异,使排版不均.可见放大图. 采用中英文字均使用宋体的方案 可以解决文字排列不对

网页设计技巧:网页图片的巧妙设计方法

文章描述:浅析网页设计中图片的使用基本原则. @MartinRGB 设计师都知道,行业的核心追求便是打造优秀的视觉效果.实际上,之所以能够成为设计师,是因为我们具备一种技艺,能够满足用户的视觉感受和视觉需求.我们可以听.读.想,我们可以想象出概念.物体以及人:但是这些感受都很抽象,只有实实在在地看到,印象才能定型. 你遇到过从来没见过雪的人吗?可能你也从来没见过雪花飘洒在天空的景象.所以这些人无法理解,到底什么是雪?他们可能会知道原理是因为寒冷而凝结了空气中的水分,落下便形成了雪,可是他们无法真

网页设计技巧:网页设计中最好不出现8种情况

文章描述:时代一直在变,一个又一个的创新让我们感到惊讶万分.网页设计的趋势如同流星,光芒耀眼,但来得快.去得也快.虽然跟风很不好,显得毫无设计主见,但很多设计潮流确实值得追随.就像当下响应式设计.扁平化设计.以及滚动视差等. 时代一直在变,一个又一个的创新让我们感到惊讶万分.网页设计的趋势如同流星,光芒耀眼,但来得快.去得也快.虽然跟风很不好,显得毫无设计主见,但很多设计潮流确实值得追随.就像当下响应式设计.扁平化设计.以及滚动视差等. 可是呢,还有很多极为"糟粕"的设计趋势,本文一一

网页设计技巧:网页背景要结合网页内容

文章描述:一个好的背景风格,可以为你的网站定下基调.我们将探讨关于网页背景设计以及趋势的一些优秀的例子,包括采用大图片,鲜艳的色彩和大胆的图案. 一个好的背景风格,可以为你的网站定下基调.我们将探讨关于网页背景设计以及趋势的一些优秀的例子,包括采用大图片,鲜艳的色彩和大胆的图案. 有时候你的网页设计某一部分引入注目,但大多数情况下是背景起到了决定性作用.背景设计往往可以用图片.图案.颜色色块组合而成,但如何才能设计出一个优秀的背景设计呢?今天我们来看看使用不同的背景设计的效果和一些技巧方法. 怎

网页设计技巧:网页图片选择JPG格式还是GIF格式

网页设计中,保证图片清晰的前提下,图片越小越好.因为这样可以减少带宽占用,加快网页打开速度.尤其对于门户网站和访问量很高的网站,如果图片 都能比原来小10K的话,那么节省的带宽相当明显.那么就要求设计师在制作或生成图像时,选择合适的格式和质量,尽量把图片体积压缩的更小.下面就网上常 用的两种格式gif和jpg该如何选择阐述下本人的看法. 何时选择gif格式?何时选择jpg格式? 对于gif和jpg格式的选择,没有固定的限制,但要把握好一点.图片色彩单一.由色块或文字组成,较少渐变色的尽量采用gi

网页设计技巧:网页设计中的F式布局

文章描述:今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. F式布局简介 F式布局是一种很科学的布局方法,基本原理依据了大量的

网页设计技巧:网页中动感线条使用

文章描述:想让网站动感十足?试试网页设计中的韵律线条. 在网页设计中,横向和竖向的直线非常常见,利用整齐的线条可以打造出有序的视觉路径以及信息层级.当然,有些时候,可以不按理出牌,设计一些倾斜的线条,让你的网站不拘一格,更加与众不同. 打破传统布局,创造动态的自由视感,让构成更加复杂--无论是利用简约的几何图形,或是精致的倾斜图像.让你的设计更具吸引力,不妨试试斜线. Paseo Itaigara 形状感很强,整体设计的很成功,显得并不杂乱.菱形无处不在,拼嵌式的菱形,装饰性的菱形,按钮的菱形,

网页设计技巧:网页的平面构成排版能力

文章描述:什么东西都离不开基础,建房子需要地基,解方程式需要先学会乘法表,唱歌需要先会"哆.来.咪".页面设计也同样需要基础,这个基础就是平面构成. 网页设计风格种多样,除去一些场景化设计和给力的素材支持,剩下的就全靠平面构成和排版了.刚开始接触网页设计的 什么东西都离不开基础,建房子需要地基,解方程式需要先学会乘法表,唱歌需要先会"哆.来.咪".页面设计也同样需要基础,这个基础就是平面构成. 网页设计风格种多样,除去一些场景化设计和给力的素材支持,剩下的就全靠平面

网页设计技巧:网页的loading进度条设计

文章描述:虽然加载在整个页面来看是一件小事,但是因为加载在不经意间导致的用户流失却是大事.在加载页中显示进度,给出承诺,增加信息量或者幽默内容都能使用户潜移默化减少"觉察"正在加载的时间.但是真正可以减缓的办法还是加载的速度增快;别致的设计虽可以治标,但加载速 对于加载(loading),想必大家都不陌生.每当看到加载页中那个不停转啊转的圈圈,或者是 "Loading-"后面不停闪动的三个点点,心里都会涌起各种焦躁反感.根据一份调查得出,用户能够忍受加载的最长时间在