IT技术博客大学习 共学习 共进步

三谈 Web 默认字体

岁月如歌 2009-12-17 09:13:28 累计浏览 3,003 次

    最近疯狂测试 reset.css, 第一个首要测试点就是默认字体。前不久秦歌的帖子和我的再谈,收到了很多朋友的反馈。重新整理了下,请先仔细查看测试页面:

    web-default-font.html

    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 是没问题的。上面的最佳方案做了相应调整。

建议继续学习

  1. Vim(gvim)编程字体推荐 (累计阅读 7,586)
  2. 介绍“最好的编程字体”Monaco (累计阅读 7,446)
  3. 等宽字体:程序员的字体 (累计阅读 5,905)
  4. CSS设置字体大小 (累计阅读 4,684)
  5. 给自己的字体课(一)——英文字体基础 (累计阅读 4,546)
  6. 解决Chrome最小字体限制 (累计阅读 4,004)
  7. 默认Web字体样式 (累计阅读 3,805)
  8. 字体文件也属于二进制文件 (累计阅读 3,666)
  9. 更改 Windows 10 命令行字体 (累计阅读 3,625)
  10. 网页字体排印指南 (累计阅读 3,604)