设计经验:谈谈web的默认字体

　　1. 优先级的描述不严谨，有 !important 时，网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

　　2. Tahoma 字体从 Win95 就有了，并且从 Win2000 开始，Tahoma 成为 Win 英文系统的默认字体。2007 年，在 Mac OS X v10.5 (Leopard) 中也开始内置 Tahoma 字体。至今，普及性还是相当不错的。

　　3. Google, YAHOO 等网站，首选 Arial, 个人觉得是出于兼容性考虑。Google 需要考虑到对各种设备的支持，这就和 Google 首页继续采用 table 布局一样，table 布局可以保证在尽可能多的用户终端中正确显示。Arial 字体同理。

　　4. 但这并不代表 Google 等页面的做法就是最好的。从渐进增强角度讲，font-family: Tahoma, Helvetica, Arial, sans-serif; 可以达到优雅降级的目的。在更好的用户代理中，显示更好的字体，同时用 Arial 殿后，也能保证在尽可能多终端设备中正确显示。渐进增强无处不在，需要我们的共同努力和推广。(注：考虑 Mac 用户，Leopard 中内置了 Tahoma 字体，因此 font-family: Helvetica, Tahoma, Arial, sans-serif; 会更渐进增强一些)

　　5. 不推荐省略默认字体族。这就和省略 </body> 一样，99.99% 的情况下不会导致问题，并且是一种优化手段。但除了特殊页面(比如 Google 首页)，普通页面普通流量下，节省这一点字符，不利于 Web 标准的整体进步。

　　6. 不设置宋体，在 GBK 编码时，英文操作系统下，IE 的默认字体是 Microsoft Sans Serif Regular. (注：不设置 sans-serif 可以避免此问题，但考虑上面第 5 条，依旧推荐前面加“宋体”来解决该问题)

　　7. 根据可用性大师 Jackob Nielsen 的调查，在目前计算机显示器的 dpi 下，无衬线字体比有衬线字体更易读。用户调研显示，Verdana 字体是易读性最高的，推荐设置为第一默认字体。这一点，可以参考 ALA 的字体设置，阅读起来的确很舒服。

　　8. Tahoma 字体的问题是，斜体时，特别是小号时，文字不易阅读，还有就是小麦总结过的下划线问题。Verdana 字体的问题是，字号相同时，比其它字体显示偏大偏宽，这导致混排时效果不佳。考虑中文网页中，一般很少用斜体，因此 Tahoma 依旧是首选。

　　9. 关于默认行高，对于博客等以大段文字为主的应用来说，1.5 是个很不错的选择。但对于淘宝的大部分页面来说，1.5 会导致 li, hx, div 等所有元素的默认行高都是 1.5, 这会给实际工作带来不少重置工作量和某些诡异 bug(小虎 & 有脚，赶快总结哦)。我更倾向于 body { line-height: 1; } p { line-height: 1.5; }

　　10. 字体对性能和效率的影响，可以忽略。有时候，勿以善小而为之。97% 的情况下，不成熟的优化是万恶之源。

　　11. 未来：若干年后，随着显示器 dpi 的提高，网页默认字体很可能会和传统印刷业的推荐字体一致 —— 采用衬线字体。等以后再说了。

　　最后，我的推荐是：

　　body { font: 12px/1 Helvetica, Tahoma, Arial, 5b8b4f53, sans-serif; }

　　p { line-height: 1.5; }

　　欢迎讨论。

评论总数：0 条 [ 查看全部 ] 网友评论