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

苏南大叔:font-family名称书写规范,常见字体中英文对照表 - font-family-list
font-family名称书写规范,常见字体中英文对照表(图6-1)

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

字体中英文列表

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

中文英文Unicode
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1
宋体SimSun\5B8B\4F53
新宋体NSimSun\65B0\5B8B\4F53
仿宋FangSong\4EFF\5B8B
黑体SimHei\9ED1\4F53
楷体KaiTi\6977\4F53
仿宋_GB2312FangSong_GB2312\4EFF\5B8B_GB2312
楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312
微软正黑体Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53
隶书LiSu\96B6\4E66
幼圆YouYuan\5E7C\5706

mac安装字体

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

苏南大叔:font-family名称书写规范,常见字体中英文对照表 - yahei-font
font-family名称书写规范,常见字体中英文对照表(图6-2)

苏南大叔:font-family名称书写规范,常见字体中英文对照表 - yahei-font-file
font-family名称书写规范,常见字体中英文对照表(图6-3)

苏南大叔:font-family名称书写规范,常见字体中英文对照表 - font-install-process
font-family名称书写规范,常见字体中英文对照表(图6-4)

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

苏南大叔:font-family名称书写规范,常见字体中英文对照表 - yahei-font-install-ok
font-family名称书写规范,常见字体中英文对照表(图6-5)

对比实验

总的来说,苏南大叔的目的就是:总结研究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>   

实验截图:

苏南大叔:font-family名称书写规范,常见字体中英文对照表 - mac-font-family-not-ok
font-family名称书写规范,常见字体中英文对照表(图6-6)

实验结论

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

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

相关链接

总结

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

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   css    font

本站的忠实读者小伙伴,正在阅读下面这些文章: