三谈 Web 默认字体
最近疯狂测试 reset.css, 第一个首要测试点就是默认字体。前不久秦歌的帖子和我的再谈,收到了很多朋友的反馈。重新整理了下,请先仔细查看测试页面:
1. Tahoma 字体的问题,小麦总结过。在 IE6 下,Arial 字体在下划线的显示上的确略有优势,甚至有神奇的魔数 1.231 来让中英文对齐。但除了 IE6, 其它浏览器下,Arial 表现并不好。考虑门户网站的设计趋势,链接加下划线的形式,已逐步去掉,比如 YAHOO 首页。国内腾讯首页也早就去掉了满屏的下划线,目前只有新浪、搜狐等站点依旧满屏下划线。考虑 IE6 的占有率正逐步降低以及面向未来编程,坚持用 Arial 优势不大。
2. 在再谈中,考虑渐进增强,把 Helvetica 放在首位。后来仔细测试发现,如果系统中没有安装 Helvetica 字体,font-family: helvetica,tahoma,arial; 的写法,会直接无视 Tahoma. 具体请看上面的测试页面。这个 bug 是致命的,不得不忍痛割爱,去掉 Helvetica.
3. 宋体的问题不多说。记住:只要 Opera 存在且有一定市场占有率,就别用 SimSun 这种写法。
4. 行高的问题。再谈里提到 1.5 会导致一些诡异 bug(主要是垂直居中对齐,需要重置行高为 1)。和同事讨论后,觉得与 line-height: 1 带来的风险相比,还是 1.5 让人放心。
5. GB 编码问题。font: 12px sans-serif; 不设置宋体,页面为 GB 系列编码时,非中文操作系统下(港台用户中有不少英文系统,还有海外华人),IE 的默认字体是 Microsoft Sans Serif Regular, 很难看。截图为证:
有两个解决方案:a. 用”宋体”垫底;b. 不加 sans-serif.
6. 宋体用 \\5b8b\\4f53 表示是为了避免文件编码不一致时带来的问题。
综上,我们可以得到 Web 默认中文字体的最佳方案:
理想主义者方案 A(所有页面用 utf-8 编码)
font: 12px/1.5 tahoma, arial, sans-serif;
理想主义者方案 B(有 gb 编码的页面)
font: 12px/1.5 tahoma, arial, simsun, sans-serif;
现实主义者方案 A
font: 12px/1.5 tahoma, arial;
现实主义者方案 B
font: 12px/1.5 arial;
可用性主义者方案:
font-family: verdana, arial, sans-serif;
2009-12-04 补充:经朋友提醒,Opera 下的默认中文字体就是宋体,因此只要宋体后无其它中文字体,用 simsun 是没问题的。上面的最佳方案做了相应调整。
建议继续学习:
- Vim(gvim)编程字体推荐 (阅读:6315)
- 介绍“最好的编程字体”Monaco (阅读:6310)
- 等宽字体:程序员的字体 (阅读:4606)
- CSS设置字体大小 (阅读:3804)
- 解决Chrome最小字体限制 (阅读:3036)
- 默认Web字体样式 (阅读:2823)
- 字体文件也属于二进制文件 (阅读:2668)
- 给自己的字体课(一)——英文字体基础 (阅读:2652)
- 更改 Windows 10 命令行字体 (阅读:2497)
- Google font api、web font与中文 (阅读:2404)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:lifesinger 来源: 岁月如歌
- 标签: 字体
- 发布时间:2009-12-17 09:13:28
- [46] IOS安全–浅谈关于IOS加固的几种方法
- [45] 图书馆的世界纪录
- [45] 如何拿下简短的域名
- [45] Oracle MTS模式下 进程地址与会话信
- [43] android 开发入门
- [42] 【社会化设计】自我(self)部分――欢迎区
- [41] 界面设计速成
- [41] 读书笔记-壹百度:百度十年千倍的29条法则
- [39] 视觉调整-设计师 vs. 逻辑
- [35] Go Reflect 性能