• 字体
  • 字体家族
  • 字体公司
  • 字体设计师
  • 字体样张
  • 资讯
  • 视频
字客网>资讯>详情

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

时间:2008-06-14 22:37:58| 应用|浏览:36|作者:fontke
导语5月微软正式提供了Windows XP下可用的雅黑字体。雅黑字体是一款近乎完美的字体,解决了宋体小文字无法辩认的问题,特别是对于液晶显示器(LCD),在开启ClearType效果之后,你就会得到一个更加完美的视觉享受。我现在已经对雅黑着迷了,回头看默认为宋体的系统,锯齿太明

5月微软正式提供了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显示正常)中行高的增加,要解决这个问题,只需要控制得的高度就可以了,但是是一个行内元素,没能设置高度,所以要配合disaply:block,然后再固定高度(不过,设置了block属性之后可能会产生自动换行,这时候你就要结合使用float等属性了)。我发现这个方法也能解决上面的问题,所以为超级链接固定高度会是比较好的方法。

额外说明:我是在Windows XP的基础上修改了默认字体,可能会因此而产生一些问题,上面我列举的两类问题我很难断定是由于雅黑字体本身引起的,还是其它不正确设置引起的。暂时没有找到Vista系统测试是否同样存在这样的问题,如果哪位有条件可以帮忙测试一下。

注:这个问题存在于Internet Explorer的各个版本中,Firefox不受影响。

附一网友的评论,不知有无道理:“这是浏览器对样式表解析而产生的差异。跟字体没有多大关系。...”

0
更多雅黑字体对IE显示网页布局的影响敬请关注字客网!
雅黑字体对IE显示网页布局的影响 网友点评
游客:文明上网,理性发言。 看不清?换一张
雅黑字体对IE显示网页布局的影响 最新评论
暂无相关评论
精彩点评
  • 游客评论免费商用中文字体有哪些?字体资讯

    新蒂字体 授权使用: 无需备案免费使用的情况: 在个人电脑上安装、打印个人文档、个人网站、博客、微博配图 需要备案免费使用的情况: 设计有可能商用的稿件(在商用时购买商业授权)、用于免费提供给他人的印刷品(印量在500份以内,且无需获得印刷品行政许可)的情况、用作没有品牌冠名的公益广告、用作完全免费(不能含有收费项目)的软件及网络服务。 需要购买个人授权的情况: 个人网店的装饰、个体商...
  • 游客评论免费商用中文字体有哪些?字体资讯

    太有用了,感谢作者
  • 天天刺绣评论耗时2年他重新设计34省市图形字体字体资讯

    设计的好棒!漂亮!稀饭!
  • Jaja评论40款高质量英文设计字体字体资讯

    怎么下载啊~
  • 简MEN评论七招打造有逼格的字体字体资讯

    有一款想要的字体,就是下来屯
  • chill评论40款高质量英文设计字体字体资讯

    地址呢?