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

苏南大叔:由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则 - chrome-font-order
由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则(图7-1)

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

症状描述

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

苏南大叔:由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则 - psd-font-missing
由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则(图7-2)

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

苏南大叔:由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则 - html-font-pingfangsc-light
由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则(图7-3)

萍方 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字体缺失,所暴露的字体加载顺序的潜规则 - html-font-pingfangsc-light-2
由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则(图7-4)

pingfang sc系列字体

以这个pingfang sc字体为例。

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

苏南大叔:由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则 - pingfangsc
由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则(图7-5)

解决方案

根据下面的链接描述:

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

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

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

苏南大叔:由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则 - html-font-pingfangsc-3
由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则(图7-6)

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

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

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

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

苏南大叔:由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则 - rendered-fonts
由pingfang sc字体缺失,所暴露的字体加载顺序的潜规则(图7-7)

相关链接

总结

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

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