css 字体引入只加载了一个文件? 而且是后边那个？为什么？

Question

@font-face {
    font-family: "PingFang SC";
    src: url(../font/PingFangSC.ttf);
}
@font-face {
    font-family: "PingFangSC-Light";
    src: url(../font/PingFangSC-Light.ttf);
}
html {
    font-size: 13.333vw !important;
    font-family: "PingFangSC-Light", "PingFang SC";
}

但是网页加载的时候只是引入了一个，这里PingFangSC-Light.ttf未被引入，为什么？

Answer 1

我的建议是尝试修改一下 @font-face 的声明顺序。把字体 PingFangSC-Light 对应的放到 PingFangSC 之前，也就是这样声明：

@font-face {
    font-family: "PingFangSC-Light";
    src: url(../font/PingFangSC-Light.ttf);
}
@font-face {
    font-family: "PingFang SC";
    src: url(../font/PingFangSC.ttf);
}
html {
    font-size: 13.333vw !important;
    font-family: "PingFangSC-Light", "PingFang SC";
}

---

EDIT

我在本地尝试了一下你说的场景，但是并没有复现你说的问题，依旧是正确应用第一个字体样式的。

如果 @font-face 引用的文件地址错误也会发起请求，所以优先怀疑是否本地已经安装了对应字体文件(PingFangSC-Light)。