css设置字体的问题

Question

<ul>
<li>百度</li>
<li>google</li>
</ul>

body {
    font-family: "arial","Hiragino Sans GB","Microsoft Yahei";
}

当设置多个字体时，浏览器会使用它可识别的第一个值。那么照理说应该“百度”“google”字体都应该是Arial,但是在chrome下测试，“百度”的字体为Microsoft Yahei

“google”的字体为Arial

这是为什么？

Answer 1

arial不支持中文。遇到一个字符时，浏览器会查询font-family设置，按顺序以支持该字符的第一个字体来显示，而不是你所理解的排在第一的字体。

Answer 2

在最后最好补充英文字体族的名称（serif or sans-serif），为了保证能够调用这个字体族里面的字体，因为大多数计算机里都有这种字体。这里有2篇文章可以参考下：
https://ruby-china.org/topics/14005 -- Web 中文字体应用指南
http://ued.ctrip.com/blog/web-page-font-settings-did-you-know.html -- 网页字体设置你了解吗？

Answer 3

arial不支持中文。如果第一个不支持，会在font-family字体中一次往下显示。