网页字体设置技巧

网页字体设置技巧

字体定义顺序
字体定义顺序是一门学问，通常而言，我们定义字体的时候，会定义多个字体或字体系列。举个栗子：

body {
font-family: tahoma, arial, ‘Hiragino Sans GB’, ‘\5b8b\4f53’, sans-serif;
}
别看短短 5 个字体名，其实其中门道很深。解释一下：

使用 tahoma 作为首选的西文字体，小字号下结构清晰端整、阅读辨识容易；
用户电脑未预装 tohoma，则选择 arial 作为替代的西文字体，覆盖 windows 和 MAC OS；
Hiragino Sans GB 为冬青黑体，首选的中文字体，保证了 MAC 用户的观看体验；
Windows 下没有预装冬青黑体，则使用 ‘\5b8b\4f53’ 宋体为替代的中文字体方案，小字号下有着不错的效果；
最后使用无衬线系列字体 sans-serif 结尾，保证旧版本操作系统用户能选中一款电脑预装的无衬线字体，向下兼容。
嗯，其实上面的 font-family 就是淘宝首页 body 的字体定义，非常的规范，每一个字体的定义都有它的意义。

字体书写规则
综上，总结一下，我觉得字体 font-family 定义的原则大概遵循：

1、兼顾中西
中文或者西文（英文）都要考虑到。

2、西文在前，中文在后
由于大部分中文字体也是带有英文部分的，但是英文部分又不怎么好看，同理英文字体中大多不包含中文。

所以通常会先进行英文字体的声明，选择最优的英文字体，这样不会影响到中文字体的选择，中文字体声明则紧随其次。

3、兼顾多操作系统
选择字体的时候要考虑多操作系统。例如 MAC OS 下的很多中文字体在 Windows 都没有预装，为了保证 MAC 用户的体验，在定义中文字体的时候，先定义 MAC 用户的中文字体，再定义 Windows 用户的中文字体；

4、兼顾旧操作系统，以字体族系列 serif 和 sans-serif 结尾
当使用一些非常新的字体时，要考虑向下兼容，兼顾到一些极旧的操作系统，使用字体族系列 serif 和 sans-serif 结尾总归是不错的选择。