IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

三谈 Web 默认字体

岁月如歌 2009-12-17 09:13:28 累计浏览 3,100 次
本机暂存

    最近疯狂测试 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. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  2. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
  3. 各公司对前端开发的职位描述 (累计阅读 10,405)
  4. iframe大小自适应 (累计阅读 10,057)
  5. 浏览器的渲染原理简介 (累计阅读 8,377)
  6. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,357)
  7. iframe里src="about:blank"的问题。 (累计阅读 8,089)
  8. 程序员眼里IE浏览器是什么样的 (累计阅读 8,011)
  9. 2010网页设计趋势 (累计阅读 7,818)
  10. Vim(gvim)编程字体推荐 (累计阅读 7,708)