html整体字体微软雅黑,网页布局中对全局字体的最佳控制_html/css_WEB-ITnose

最新推荐文章于 2024-06-13 10:05:41 发布

练多多

最新推荐文章于 2024-06-13 10:05:41 发布

阅读量579

点赞数

文章标签： html整体字体微软雅黑

在网页布局中对字体的控制是非常重要的，因为他关系到用户的体验，也就是页面的美观。本文根据作者独特的 CSS 实线经验总结出来的。 body { font-family: Arial, sans-serif; }

这是我用过的最好的全局字体解决方案了，当然，这只是基于我个人的评判标准。稍后我还会分析一下其他字体写法的优缺点，最后再总结这个写法的特点。 body { font-family: "宋体", sans-serif; }

这个写法的缺点在于：

1、宋体在 Safari 和 Vista 的 IE7 下，看起来特难看。

2、宋体的英文字很难看。

3、如果在 CSS 里写中文，你得小心你 HTML 和 CSS 的编码是否一致。 body { font-family: SimSun,sans-serif; }

这样写可以避免上面的第三个问题。但是宋体本身确实很难看。我们希望在不同平台下，都用各自默认的字体。XP 是宋体，Vista 是微软雅黑，Mac 是黑体。这样的话，只能将字体的第一个设置为英文字体，这样遇到中文的时候，浏览器会自动调用默认字体(Vista IE 7的一些版本里貌似默认还是宋体，这个我就无能为力了，交给用户设置的自主权吧) body { font-family: Tahoma, sans-serif; }

这是一个不错的解决办法。Tahoma 其实是一个挺漂亮的字体，但它也会带来一些问题：

1、由 Tahoma 显示的中文，在 IE6 里，下划线会紧紧的贴住中文字，很难看。

2、IE6 下，Tahoma 无法正确的设定为 13px。它会跟 14px 一样大。但是其他浏览器没有这个问题。

3、如果一行里同时出现中文和英文，且这一行里有元素被定义了 vertical-align 属性，在 IE 6、7 里会导致文字高低不齐，甚至出现下划线错位。 body { font-family: Arial, ans-serif; }

上述两个问题，Arial 都没有。但是 Arial 也有缺点：

1、比 Tahoma 难看。

2、Tahoma 里的第三个问题也同样存在。不过，这个 bug 是有个解决办法的，就是将这一行定义 zoom:1。

所以，我们不难看出，定义为 Arial 是最合适的。如果实在不喜欢，可以将全局定义为 Tahoma，然后再将有下划线的(如链接)文字定义为 Arial，这也是个不错的办法。

最后，对于全局字体，补充一点：

在 IE 里，所有的表单元素都不继承 body 的字体属性，需要单独设置： input, label, select, option, textarea, button, fieldset, legend { font-family:Tahoma,sans-serif;}