三谈Web默认字体

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

[关注细节的最佳方案]有效期时间格式的展现

最近设计一个优惠券列表,有个属性是有效日期,因为空间有限,必须要把开始日期和结束日期在一行显示,这样就出现一排的数字,日期有好几种我们习惯的格式,哪个更好?

上图说话:

虽然只是小小的有效期,但列出不同的展现方式,能帮我们找到最佳的方案;

平时我们的设计也是如此,常常做了一个方案后,因为花了很多精力,总会不自觉认为它已经够好了;当我们放下包袱,好好听取其他同事的建议,也许会看到很多自己没有考虑周全的细节还有待优化,优化后再和第一版去对比,是不是更棒了?

我相信好的视觉设计,都是细节经得起推敲的。

转自:http://ued.koubei.com