多种font-family

修改一个中英文混合css需求时，看到了以下样式。

font: 12px/25px "Microsoft Yahei", "微软雅黑", "宋体", "Helvetica Neue", Helvetica, Arial, sans-serif;

居然设置了这么多字体。然后就查了查，贴上来。

font-family的调用方法:

代码如下:

div {
    font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; 
    font:bold 12px/0.75em Arial,'Times New Roman','Microsoft YaHei',SimHei; 
}

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

根据font-family的字体调用原则我们可以为英文,中文,等两种字体调用不同的字体来渲染。

如:Arial,’Times New Roman’这两种字体不认识中文,只认识英文,所以,这两种字体只能渲染英文数字和一些特殊符号,而页面中的中文就会自动调用第三种字体Microsoft YaHei(PS:假如存在这种字体的话)。

所以,在定义字体的时候把英文的字体写在前面把中文的写在后面。这样，系统就会自动按顺序依次给字用字体，如果当前字体不支持文本，自动换用列表中的下一个字体。

经过测试，IE9、IE9兼容模式（兼容IE8）、Chrome浏览器最新版本（34.0）、 Firefox浏览器最新版本（29.0）支持该font-family属性；但是某些版本的IE浏览器（IE7、IE8）无法实现该font-family属性的要求，还会暴露出一些奇怪的 bug。如在这些版本的浏览器下使用中文字体（比如微软雅黑），需要把该中文字体放到font-family属性的首位，但是会导致英文字体也会使用该中 文字体渲染。即在这些浏览器（IE7、IE8）下不支持在font-family属性中为英文和中文字体分别使用不同的字体。

我改成这样，

font: 12px/25px "Times New Roman", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;

用360兼容模式测了下，IE7，8都没发现文章中说的问题。