css font-face 加载本地自安装字体为何无效？

Question

以系统自带字体“宋体”和自行安装的字体“思源宋体 CN”为例。以下两种用法对前者都有效，但font-face的用法对思源字体无效。

/*用法1:都有效*/
p.p1 { font-family:"宋体"; }
p.p2 { font-family:"思源宋体 CN"; }

/*用法2*/
@font-face {
    font-family:"font01";
    src:local("宋体");
}
@font-face {
    font-family:"font02";
    src:local("思源宋体 CN");
}
p.p1 { font-family:"font01"; } /*有效*/
p.p2 { font-family:"font02"; } /* 无效！浏览器使用默认字体渲染 */

测试可以发现，问题就是出在local()读取自安装字体上，浏览器认为该字体无法读取。比如下面的做法，会跳过思源宋体，而使用宋体。

@font-face {
    font-family:"font00";
    src: local("思源宋体 CN"), local("宋体");
}
p { font-family:"font00"; }
/*效果：按宋体渲染！*/

试用了其它自安装字体，有中文也有英文字体，也都是这样的。盼解答！

猜测
可能和字体本身有关。在如下地址看到对一些字体的介绍，似乎意指有些字体支持local()而有些不支持：
https://transfonter.org/examples

Answer 1

本地测了一下，应该是 local("") 里面不支持中文，里面应该填字体的英文。
比如我本地用的思源黑体，背后的字体文件是 SourceHanSansCN-Normal.ttf
用 local("思源黑体 CN") 不行，
用 local("SourceHanSansCN-Normal") 就可以

Answer 2

浏览器报错了没？如果报错是不是跨域问题，可以考虑把字体转化成base64 参考网址：https://transfonter.org/