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

浏览器默认的样式每每在不一样的浏览器、不一样的语言版本甚至不一样的系统版本都有不一样的设置，这就致使如 果直接利用默认样式的页面在各个浏览器下显示很是不一致，因而就有了相似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字体样式 @ 随网之舞 
有兴趣的朋友还能够看一下另外一篇针对该文进行补充的《再谈 Web 默认字体》