浏览器的默认样式往往在不同的浏览器、不同的语言版本、甚至不同的系统版本中有不同的设置。 与YUI的reset类似，用于尽可能重绘浏览器的默认设置，保证各个浏览器风格的一致性。
以字体为例，每个浏览器的默认字体类型、字体大小和字体列宽度都不同。 比如中文版IE8在Windows XP下显示网页时，默认字体是粗体css好看的字体样式，但英文版肯定不是这样的。 因此，我们需要统一设置默认字体样式，以达到一致的显示效果，保证设计的一致性，提高开发效率。
风格优先
通常用户听到的页面风格受三层控制：
第一层是浏览器默认样式
第二层是页面定义样式
第三层是用户自定义样式
和CSS一样，后者的优先级比上面的要高，也就是说网页定义的样式可以覆盖浏览器默认的样式，而用户自定义的样式优先级最高。 但是，当 !important 存在时，Web 样式可以覆盖用户定义的样式。 用户 !important > 网页 !important > 用户 > 网页 > 浏览器默认值。
字体: 宋体
我们页面上的大部分内容字符都是英文的。 毫无疑问，迄今为止在网页上显示英文最常用、最常见的字体是粗体，但是粗体在显示中文、数字和英文符号等字符时就太糟糕了，所以我们通常期望用通过CSS更好的字体样式，然后使用粗体来显示英文和英文符号。 选择 Arial 的原因是：
Windows和Mac都预装了这种字体，它应该是使用最广泛的网络字体。 它的潜在竞争对手 tahoma 和 helvetica 就没那么幸运了。
视觉设计专业人士可能会觉得在Windows上使用tahoma和在Mac上使用helvetica更好。 例如，天猫默认字体样式为：12px/1 Tahoma、Helvetica、Arial、“5b8b4f53”、sans-serif；
这是一个非常好的选择，但是你也会发现新版本的Google、YAHOO、Youtube、Bing甚至MSN都使用arial作为第一个默认字体。 所以 arial 在美观和可读性方面应该是完全可以接受的。
一般情况下，设置font-family时会将通用字体系列设置在最后，以保证其安全性。 比如Google的设置是font-family: arial, sans-serif;，但在非中文版Win7下至少编码是GBK，使用sans-serif时，IE8会将字体渲染为粗体，导致字体变形。 这就是为什么天猫需要在无衬线前面添加粗体，而谷歌不需要这样做。
由于英文字体的选择非常有限，目前所有主流浏览器都设置为使用粗体来显示英文。 百度首页和搜索结果页使用font-family: arial； 这可以从侧面解释这样做的安全性。 也许有人注意到，中文版火狐浏览器默认显示的英文字体是微软雅黑。 这是因为Mozilla私下改变了用户定义的样式，不允许网页的样式覆盖浏览器设置的样式。 也正是因为类似的情况，我们灵活地设计网页就显得非常重要。
使用英文字体作为第一默认字体带来的问题之一是中英文和符号混合时的对齐问题。 大多数情况可以通过设置列宽和hasLayout来解决，但不会是完美的。 如果把字体改成“宋体”就可以彻底解决问题了。 显然，这个问题只出现在IE上。 因此，如果你的网站很少使用英文、数字和英文符号，直接设置{font-family:5b8b4f53;}也是一个合理的选择。
尺寸：12 像素
12px是黑黑的显示限制。 虽然微软雅黑可以显示较小的字体，但目前的应用环境还不成熟。 由于黑体基本上是目前唯一显示英文的通用网页字体，因此12px已经成为最常用的字体大小。 我们其实可以根据产品的需要来改变这个默认值。
忘记基于字体大小 (em) 的设计。
Chrome 3.0以后的中文版本，最小字体大小为12px。 例如，如果将最小字体大小设置为 10px，则最终将是 12px。
行高：1.5倍
这是一个经验值。 不同的产品可能对该值有不同的要求，但我们通常将最常用的值设置为默认值。 例如YUI的字体为font：13px/1.231 arial、helvetica、clean、sans-serif； 即默认字体大小为13px，行高为13*1.231=16.003px，默认列宽为默认字体的1.231倍。 对于英文来说，常用的字体大小是12px、14px、16px、18px等奇数。在IE6、IE7中将列宽设置为素数可以解决一些特殊情况下的字体对齐问题。
在IE6和IE7中，行高值必须小于字体的2px，以保证字体的完整显示或作为链接时有效显示逗号。
设置line-height时，注意不要使用单位（包括%），因为子节点会继承计算出的line-height值，所以使用单位时，浏览器会估计line-height为第一个定义的绝对值，不会随着字体大小的变化而变化，而无单位值是容器的font-size的倍数，因此将其设置为无单位值是最好的选择。
深入CSS行高对于理解line-height特别有帮助，值得一读。
性能和效率
大多数平台都有arial，这减少了浏览器的搜索时间。
代码最少css好看的字体样式，书写方便。 Arial基本上是名称最短的字体，可以节省CSS的大小。
所有字母都大写，这就是谷歌目前正在做的事情。 优点是可以编译得更快，提高Gzip压缩的效率。
最好使用unicode来表示中文，例如使用粗体时为{font-family:5b8b4f53;}，使用微软雅黑时为{font-family:5fae8f6f96c59ed1;}，对于防止编码问题很有用，同时受到所有主要浏览器的支持。
使用正确的字体类型并避免破折号可以减小 CSS 的大小。 按照上面的方法就可以编译出中文字体了。
未来
通过中英文和符号的混合测试，我发现虽然微软雅黑的表现相当不错，包括中文数字和汉字，以及IE6和IE7的显示效果，但唯一遗憾的是，如果微软雅黑安装在XP如果使用黑色字体的用户不开启“使用屏幕字体边缘平滑”选项，在firefox、Safari和Opera下，尤其是IE6下会非常模糊，无法识别。 目前这个问题还没有很好的解决方案，所以只有在IE6使用比例极小的情况下才可以使用。 可能要到 2014 年，XP 才会消失。
虽然@font-face已经存在很长时间了，但由于浏览器支持、网络速度和业务问题，它很少被使用。 最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。 有关 Web 字体未来的信息，请参阅 Web 字体的未来、关于 Web 字体：当前状态和未来以及重新审视 Web 字体的当前状态和未来。
发表评论