IE中雅黑字体给布局带来的变化

作者:dudo 来源:dudo blog 时间:2008-06-13 11:22:00 

  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不受影响。

标签:字体,布局,css,ie
0
投稿

猜你喜欢

  • javascript定时变换图片实例代码

    2024-04-17 10:24:14
  • Python实现照片卡通化

    2021-03-29 18:45:40
  • SqlServer Mysql数据库修改自增列的值及相应问题的解决方案

    2024-01-14 13:32:46
  • MySQL 8.0 驱动与阿里druid版本兼容问题解决

    2024-01-17 06:25:49
  • Python 编程速成(推荐)

    2021-04-03 04:30:10
  • Pyramid添加Middleware的方法实例

    2022-11-25 18:50:34
  • 详解用 python-docx 创建浮动图片

    2021-07-16 13:32:12
  • WEB前端开发高性能优化之JavaScript优化细节

    2009-06-10 14:38:00
  • Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解

    2021-07-10 03:34:55
  • python中数字列表转化为数字字符串的实例代码

    2021-04-30 02:46:45
  • vue实现父子组件之间的通信以及兄弟组件的通信功能示例

    2024-05-21 10:15:43
  • ASP初学者学习ASP指令

    2008-10-14 17:27:00
  • Python全局变量global关键字详解

    2023-01-29 22:32:50
  • python调用百度API实现人脸识别

    2021-06-11 23:52:23
  • Python实现处理管道的方法

    2022-05-17 22:58:29
  • java学习指南之字符串与正则表达式

    2022-02-23 14:05:50
  • python中必会的四大高级数据类型(字符,元组,列表,字典)

    2023-01-10 00:54:20
  • Python标准库学习之psutil内存详解

    2023-09-14 21:33:35
  • Python实现的求解最大公约数算法示例

    2022-01-12 12:15:35
  • 解决pip install xxx报错SyntaxError: invalid syntax的问题

    2023-02-13 23:53:07
  • asp之家 网络编程 m.aspxhome.com