font-family名称书写规范，常见字体中英文对照表

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在实践css字体font-family的过程中，苏南大叔发现：对于常见中文字体，在各大厂商的产品中，有着不同的表述。比如：有的表述为中文"微软雅黑"，有的表述为英文Microsoft Yahei，还有的表述为Unicode码\5FAE\8F6F\96C5\9ED1。这个就有些傻傻分不清楚了。

本文的测试环境：mac/win10/chrome@75.0.3770.80。

字体中英文列表

这里，苏南大叔也不求大而全了，就写这几个可能用到的就好了。其实也就是微软雅黑/宋体/黑体用得到，其他的基本上也用不到。

mac安装字体

因为本文要做对比实验，所以在win10环境下，从c://windows/system32/fonts/下复制了"微软雅黑"字体到mac下，共三个字体文件，双击安装点击安装六次字体。

然后在mac的字体册app中，可以看到已经安装好了"微软雅黑"字体。

对比实验及结论

总的来说，苏南大叔的目的就是：总结研究css中有关中文字体的规范写法，方式就是做实验，目标实验字体是"微软雅黑"。在上一篇文字中，苏南大叔说过：一款中文字体共有三种名称表达方式。然后在css中，苏南大叔分别设置这三种表达方式。同时通过font-finder来查看最终的渲染效果。

实验代码：

<span>微软雅黑(默认)</span><br>
<span style="font-family:微软雅黑">微软雅黑</span><br>
<span style="font-family:'Microsoft Yahei'">微软雅黑（Microsoft Yahei）</span><br>
<span style="font-family:\5FAE\8F6F\96C5\9ED1">微软雅黑（unicode）</span><br>   

实验截图：

苏南大叔的实验结论就是：最好在css里面写字体的英文名字。这个结论可能和大多数的人的习惯不同，但是，ta可能是正确答案...

• 在mac系统上，加载"微软雅黑"的时候，中文和Unicode都失败了。
• 但是在win系统中，中文、英文、Unicode都被正确识别了。

相关链接

• https://newsn.net/say/chrome-plugin-font-finder.html
• https://newsn.net/say/font-family-name.html

总结

虽然本文中的结论有些耸人听闻，但是从目前的测试结果上来看，确实在设置css的font-family的时候，最好写对应字体的英文名，这个是更稳妥的行为。

更多有关字体的相关文字，请点击苏南大叔的经验文章：

• https://newsn.net/tag/font/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。