由pingfang sc字体缺失，所暴露的字体加载顺序的潜规则

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

苏南大叔的win10系统重装了，系统盘里面的字体都丢失了。在重新安装字体的时候，偶然间发现了一个页面加载字体的潜规则。

那么，这个由pingfang sc字体缺失，而进行的安装，所引发的页面显示诡异问题，究竟是怎么回事呢？本文测试环境：win10，chrome@96.0.4664.110。

症状描述

由于苏南大叔的配图模板里面，使用了这款pingfang sc light字体。所以，苏南大叔从网上下载了一些pingfang字体，安装在了系统里面。否则，photoshop编辑图像的时候，会报错。

但是，安装完成后，打开腾讯云主页的时候，发生了意料之外的事情。页面变成了这样：

萍方 vs 苹方 vs pingfang

猛地看上去，萍方/苹方/pingfang应该是同一个字体。但是，实际上的效果，却并不相同。那么，到底谁是真正的pingfang sc呢？
这里以能否以pingfang sc为名称识别出来，作为标准。为什么这么说呢？因为网页里面的font-family，写的都是pingfang sc，也许萍方/苹方都是差不多的字体，但是不能在网页里面自动识别出来。所以，就等于零。

body {
    font-family: PingFang SC,microsoft yahei,sans-serif;
}

比如，上述css定义，就来自于腾讯云主页。在实际的应用过程中，只有安装好的pingfang sc系列字体才能被识别【如下图中的右侧字体】。注意：萍方/苹方，在安装的时候，文件名也都是pingfang-sc之类的文件名。但是，安装完成的真正成品，可不是这个拼音名字。进而导致字体不能识别。

pingfang sc系列字体

以这个pingfang sc字体为例。

• sc表示的是：简体中文。所以，繁体中文网页应该设置tc字体。
• pingfang sc是mac系统下的默认字体，win系统下面，默认的字体是微软雅黑。
• pingfang sc是一系列字体，有light/regular/bold的区分。

解决方案

根据下面的链接描述：

• https://newsn.net/say/css-font-family-serif.html

国内大多数网页，在定义网页字体的时候，都是先定义pingfang sc，然后定义微软雅黑。那么，

• 正常来说，win系统是不会安装pingfang sc字体的，所以，显示微软雅黑，页面正常。
• 但是，一旦单独安装了pingfang sc light，页面就会识别出这个light字体，页面不正常。
• 解决方案是：再安装一个pingfang sc regular，页面会在light之前优先识别regular，页面正常。

如果您非要在win下面安装pingfang sc字体，可能要三思而后安装了。李鬼似乎有点多...

判断加载的是什么字体标准

其实，这里有个问题，苏南大叔是靠什么判断页面上面加载的错误字体是pingfang sc light呢？那么，就涉及到css的Computed的Rendered Fonts问题了。

有人会说有个谷歌插件叫做whatfont，可以直接显示字体。苏南大叔其实试过了，显示的根本就不准确。比如本文中的例子，pingfang sc light，一直提示是arial。

最准确的就是查看chrome的开发者工具里面的Rendered Fonts，什么字体最终渲染了多个字都显示的很清楚。

相关链接

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

总结

网页字体加载也是个值得探讨的问题，很多时候，并不是大家所想象的那样，这有其深层次的原因。综述的话，win系统最好不要安装pingfangsc字体，如果非要安装，请把一系列6个文件都安装上，并且要注意识别李鬼字体。

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

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