技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 三谈 Web 默认字体

三谈 Web 默认字体

浏览:2200次  出处信息

    最近疯狂测试 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)编程字体推荐    (阅读:6315)
  2. 介绍“最好的编程字体”Monaco    (阅读:6310)
  3. 等宽字体:程序员的字体    (阅读:4606)
  4. CSS设置字体大小    (阅读:3804)
  5. 解决Chrome最小字体限制    (阅读:3036)
  6. 默认Web字体样式    (阅读:2823)
  7. 字体文件也属于二进制文件    (阅读:2668)
  8. 给自己的字体课(一)——英文字体基础    (阅读:2652)
  9. 更改 Windows 10 命令行字体    (阅读:2497)
  10. Google font api、web font与中文    (阅读:2404)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1