网页布局中对全局字体的最佳控制
在网页布局中对字体的控制是非常重要的,因为他关系到用户的体验,也就是页面的美观。本文根据作者独特的 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; }
建议继续学习:
- Vim(gvim)编程字体推荐 (阅读:6310)
- 介绍“最好的编程字体”Monaco (阅读:6304)
- 等宽字体:程序员的字体 (阅读:4596)
- CSS设置字体大小 (阅读:3796)
- 解决Chrome最小字体限制 (阅读:3032)
- 默认Web字体样式 (阅读:2818)
- 字体文件也属于二进制文件 (阅读:2664)
- 给自己的字体课(一)——英文字体基础 (阅读:2632)
- 更改 Windows 10 命令行字体 (阅读:2483)
- Google font api、web font与中文 (阅读:2399)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:welpher 来源: 前端码工
- 标签: 字体
- 发布时间:2016-03-23 17:52:22
- [55] Oracle MTS模式下 进程地址与会话信
- [54] IOS安全–浅谈关于IOS加固的几种方法
- [53] 如何拿下简短的域名
- [52] Go Reflect 性能
- [51] android 开发入门
- [51] 图书馆的世界纪录
- [49] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 【社会化设计】自我(self)部分――欢迎区
- [40] 程序员技术练级攻略
- [32] 视觉调整-设计师 vs. 逻辑