网页设计中的默认字体样式详解

作者：秦歌

原文地址：http://dancewithnet.com/2009/11/22/default-web-font-style/

浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

样式优先级

通常用户看到的页面的样式会受到三层控制:

  • 第一层是浏览器的默认样式
  • 第二层是网页定义样式
  • 第三层是用户自定义样式

和CSS一样，后面的优先级 高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。不过，当有 !important 时，网页样式可以覆盖用户自定义样式。用户 !important > 网页!important > 用户 > 网页 > 浏览器默认。

字体：arial

我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：

  1. Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。
  2. 视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; 这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
  3. 一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
  4. 因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

大小：12px

  1. 12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。
  2. 不用考虑基于字体大小（em）的设计。
  3. 在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。

行高：1.5倍

  1. 这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。
  2. 在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。
  3. 设置line-height时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。
  4. 深入CSS 行高非常有利于理解line-height，值得一读。

性能和效率

  1. 大部分平台都有arial，减少浏览器的查找时间。
  2. 代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。
  3. 所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。
  4. 中文最好用unicode表示，比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。
  5. 使用正确的字体种类写法，避免使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

未来

  1. 通过对中英文及符号混排的测试，我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打 开“使用屏幕字体的边缘平滑”选项的话，在Firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的 解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年，XP死掉的时候。
  2. 虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。

再谈 Web 默认字体

作者：玉伯

原文地址：http://lifesinger.org/blog/2009/11/web-default-font/

秦歌这篇文章总结得很不错，俺挑刺来啦：

  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, \5b8b\4f53, sans-serif; }
p { line-height: 1.5; }

欢迎讨论。