设计观点View
作者头像

三谈Web默认字体

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

web-default-font.htmljyj上海云路网络科技有限公司

1. Tahoma 字体的问题,小麦总结过。在 IE6 下,Arial 字体在下划线的显示上的确略有优势,甚至有神奇的魔数 1.231 来让中英文对齐。但除了 IE6, 其它浏览器下,Arial 表现并不好。考虑门户网站的设计趋势,链接加下划线的形式,已逐步去掉,比如 YAHOO 首页。国内腾讯首页也早就去掉了满屏的下划线,目前只有新浪、搜狐等站点依旧满屏下划线。考虑 IE6 的占有率正逐步降低以及面向未来编程,坚持用 Arial 优势不大。jyj上海云路网络科技有限公司

2. 在再谈中,考虑渐进增强,把 Helvetica 放在首位。后来仔细测试发现,如果系统中没有安装 Helvetica 字体,font-family: helvetica,tahoma,arial; 的写法,会直接无视 Tahoma. 具体请看上面的测试页面。这个 bug 是致命的,不得不忍痛割爱,去掉 Helvetica.jyj上海云路网络科技有限公司

3. 宋体的问题不多说。记住:只要 Opera 存在且有一定市场占有率,就别用 SimSun 这种写法。jyj上海云路网络科技有限公司

4. 行高的问题。再谈里提到 1.5 会导致一些诡异 bug(主要是垂直居中对齐,需要重置行高为 1)。和同事讨论后,觉得与 line-height: 1 带来的风险相比,还是 1.5 让人放心。jyj上海云路网络科技有限公司

5. GB 编码问题。font: 12px sans-serif; 不设置宋体,页面为 GB 系列编码时,非中文操作系统下(港台用户中有不少英文系统,还有海外华人),IE 的默认字体是 Microsoft Sans Serif Regular, 很难看。截图为证:jyj上海云路网络科技有限公司
jyj上海云路网络科技有限公司
有两个解决方案:a. 用”宋体”垫底;b. 不加 sans-serif.jyj上海云路网络科技有限公司

6. 宋体用 \5b8b\4f53 表示是为了避免文件编码不一致时带来的问题jyj上海云路网络科技有限公司

综上,我们可以得到 Web 默认中文字体的最佳方案:jyj上海云路网络科技有限公司

理想主义者方案 A(所有页面用 utf-8 编码)jyj上海云路网络科技有限公司

font: 12px/1.5 tahoma, arial, sans-serif;

理想主义者方案 B(有 gb 编码的页面)jyj上海云路网络科技有限公司

font: 12px/1.5 tahoma, arial, simsun, sans-serif;

现实主义者方案 Ajyj上海云路网络科技有限公司

font: 12px/1.5 tahoma, arial;

现实主义者方案 Bjyj上海云路网络科技有限公司

font: 12px/1.5 arial;

可用性主义者方案:jyj上海云路网络科技有限公司

font-family: verdana, arial, sans-serif;

2009-12-04 补充:经朋友提醒,Opera 下的默认中文字体就是宋体,因此只要宋体后无其它中文字体,用 simsun 是没问题的。上面的最佳方案做了相应调整。jyj上海云路网络科技有限公司