详解CSS网页布局中默认字体样式

　　默认的浏览器样式通常会在不同的浏览器以及不一样的语言版本，甚至不一样的系统版本都会有不一样的设置，就是说要是直接用默认样式的页面在每个浏览器之中不同显示，就有像YUI的reset类似的用来尽量重写浏览器的默认设置，来保证浏览器样式一样。

　　例如字体，每个浏览器默认的字体种类、大小以及行高都不同，要是IE8中文版在WindowsXP当中显示网页的时侯的默认字体为宋体。这就是要统一设置默认字体样式的原因，就方便显示一样的效果保证设计相同以及提高开发效率。

　　（一）样式优先级

　　一般情况下，用户看到的页面的样式受三层控制:

　　（1）浏览器的默认样式

　　（2）网页定义样式

　　（3）用户自定义样式

　　与css相同，后面的优先级会高于前面的，指的是网页定义样式能覆盖浏览器的默认样式，用户自定义样式优先级是最高的。但是在有!important的时侯，网页样式能覆盖用户的自定义样式。即：用户!important>网页!important>用户>网页>浏览器默认。

　　（二）字体：arial

　　页面字符基本上都是中文，而在网页中比较常用也是最通用字体为宋体，宋体在显示英文、数字以及英文符号的时侯就过于糟糕，例如：?字符，所以一般想要通过CSS实现用更好的字体样式显示，就用宋体显示中文以及和中文符号。选择arial的原因是：Windows以及Mac都预装了该字体，就是用最广泛的网页字体。其潜在对手tahoma以及helvetica就没那么幸运了。

　　视觉设计的人会认为在Windows中用tahoma，Mac中用helvetica会更好，例如淘宝默认字体样式为：font:12px/1Tahoma,Helvetica,Arial,"\\5b8b\\4f53",sans-serif;

　　但会发现Google、YAHOO、Youtube、Bing以及MSN都用arial为第一默认字体。从美观和可读性上说arial是能够完全接受的。

　　通常设置“font-family”都在最后设置通用字体来保证它的安全性，例如：Google设置为“arial,sans-serif”，在非中文版的Win7下编码是GBK时，IE8会由于sans-serif来渲染宋体，就会使字体变形，这就是淘宝需要在“sans-serif”加宋体而Google不需要的原因。

　　由于中文字体选择有限，当前所有的主流浏览器都设置用宋体显示中文。Baidu首页和搜索结果页用font-family:arial，能从侧面说明安全性。就会有人注意到Firefox默认的中文字体为微软雅黑，是由于谋智网络擅自修改了用户自定义样式，网页的样式不能覆盖浏览器设置的样式。所以，要弹性的设计网页。

　　用英文字体作为第一默认字体会使中英文以及符号混排时的对齐问题、设置行高以及hasLayout可以解决很多问题，但不会很完美，要是把字体改成“宋体”就可以彻底的解决问题。该问题只会出现在IE上。要是网站很少用英文、数字以及英文符号，就直接设置{font-family:\\5b8b\\4f53;}也很合理。

　　（三）大小：12px

　　宋体可以显示的极限为12px，即使微软雅黑可以显示更小的字体，但应用环境还没成熟。因为宋体是显示中文唯一通用的web字体，这就是为什么12px是最常用的字体大小的原因。就能根据产品需要修改默认值。

　　可以先不考虑字体大小（em）的设计。

　　Chrome3.0之后的中文版，最小值的字体大小是12px，要是设置最小字体为10px，也会变成12px。

　　（四）行高：1.5倍

　　1.5是经验值，很多时候对这个值的要求会不同，通常会设置常用的为默认值。例如：YUI的font中是font:13px/1.231arial,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，来减少浏览器查找时间。因为它的代码最少，书写也方便。arial是名字最短的字体，能节约CSS的大小。

　　Google就是全部字母都小写，就能更快编写也可以提升Gzip压缩的效率。

　　最好中文就用unicode表示，例如：用宋体是{font-family:\\5b8b\\4f53;}，用微软雅黑为{font-family:\\5fae\\8f6f\\96c5\\9ed1;}，这就有利于避免编码问题，也可以得到所有的主流浏览器的支持。

　　用正确的字体种类写法，避免用引号，就能缩小CSS的大小。

　　（六）未来

　　通过测试中英文和符号混排，就会觉得微软雅黑其实相当不错，包括英文数字、英文字符以及在IE6和IE7的显示效果，但在XP要是安装了微软雅黑字体的用户没打开“使用屏幕字体的边缘平滑”选项的话，在firefox、Safari以及Opera、尤其是IE6下会非常模糊难辨。所以等到IE6使用比率很小的时候才可以正式用它。

　　总结：即使早就有了@font-face，但是浏览器的支持、网速以及商业问题，就会导致它很少被应用。最近Firefox3.6将支持WebOpenFontForma。与Web字体未来的相关信息可以看Web字体的未来、关于Web字体：现状与未来和再谈Web字体的现状与未来。我们课课家教育会给大家介绍更多关于考试认证、Web开发的内容，感兴趣的话可以关注一下。