雅黑字体对IE中的网页布局的影响

mainzsl

mainzsl

2016-02-19 23:28

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享雅黑字体对IE中的网页布局的影响吧。

5月20日,微软正式提供了Windows XP下可用的雅黑字体下载,雅黑字体是一款近乎完美的字体,解决了宋体小文字无法辩认的问题,特别是对于液晶显示器(LCD),在开启ClearType效果之后,你就会得到一个更加完美的视觉享受。我现在已经对雅黑着迷了,回头看默认为宋体的系统,锯齿太明显了,很丑。 
但是这样随之而来的问题是,雅黑会对Internet Explorer中的布局页面影响。目前我发现的问题主要存在于两个方面: 
一、下划线有时变成了删除线(视觉错位,并不是真正的删除线),在有英文和中文混排的段落中,下划线会被折断,变得相当不规则。
下面是google.cn首页的中文文字超级链接:

这个现象只会出现在中文字体中,英文字体不受影响:


如果有中英文混排的情况,就更加明显了:

可以看出,有中文的地方下划线都上移的,英文没有受到影响。 
二、Internet Explorer中行高的变化
下面是我的博客中对一个有背景图片的超级链接的截图:

原来在宋体下正常的样式,现在在下面露出来了一块,这说明在Internet Explorer中行高增加了。但是在Firefox中并没有发生变化。 
三、尝试解决
在Google.cn的截图中我们发现,右边的登录超级链接是正常的,这说明不是所有的中文超级链接都存在这样的问题,我仔细对照了一下他们样式上的差异,发现左面的链接比右面的登录多了一个样式: 
vertical-align:top; 
我把这个属性屏蔽掉之后一切正常。两样在第三张来自魅族论坛的这张截图中,我发现在虽然它没有在文字样子中出现vertical-align,但是在后面的两个小图片中有: 
vertical-align:middle; 
去掉这两个图片后,一切又正常了。 
因此可以肯定,在中文的超级链接中使用vertical-align会出现问题(并不是每个元素都有vertical-align属性),最简单的解决方法就是,避免使用vertical-align或者valign,或者避免使用超级链接的下划线。当然这不是正确处理问题的好方法 
至于在我博客中再现的这个问题,恰恰说明雅黑字体导致Internet Explorer(Firefox显示正常)中行高的增加,要解决这个问题,只需要控制得的高度就可以了,但是a是一个行内元素,没能设置高度,所以要配合disaply:block,然后再固定高度(不过,设置了block属性之后可能会产生自动换行,这时候你就要结合使用float等属性了)。我发现这个方法也能解决上面的问题,所以为超级链接固定高度会是比较好的方法。 
额外说明:我是在Windows XP的基础上修改了默认字体,可能会因此而产生一些问题,上面我列举的两类问题我很难断定是由于雅黑字体本身引起的,还是其它不正确设置引起的。暂时没有找到Vista系统测试是否同样存在这样的问题,如果哪位有条件可以帮忙测试一下。
另外:这个问题存在于Internet Explorer的各个版本中,Firefox不受影响。 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

雅黑字体对IE中的网页布局的影响

Web开发
雅黑字体对IE中的网页布局的影响

猎豹浏览器如何使用雅黑字体?

浏览器
猎豹浏览器如何使用雅黑字体?

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

微软雅黑字体设计方法和技巧详细剖析

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
微软雅黑字体设计方法和技巧详细剖析

IE页面设置成雅黑字体过段时间又变了怎么办

浏览器
IE页面设置成雅黑字体过段时间又变了怎么办

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何将Vista默认雅黑字体改为宋体

windows 操作系统
如何将Vista默认雅黑字体改为宋体

让网页显示的字体更美观 IE字体设置

浏览器
让网页显示的字体更美观 IE字体设置

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

css教程:美化网页段落的排版

css教程:美化网页段落的排版

却始终感受不到你的痛

却始终感受不到你的痛
下拉加载更多内容 ↓