使用local()的@font-face回退字体无法生效，求助排查问题原因

DevOps 小满

2026-4-15

嘿，我来帮你捋捋可能的问题点，毕竟这类字体回退的坑我也踩过不少😉

首先可以确定的是，你用url()能正常工作，说明@font-face的整体结构、ascent-override这类度量属性的配置是没问题的，问题大概率出在local()相关的细节上：

本地字体名称不匹配
不同操作系统对同一字体的内部命名可能不一样！比如Windows上Arial的本地名称是"Arial"，但Mac里它的内部标识可能是"ArialMT"，部分Linux发行版的变体命名也有差异。你现在只写了local(Arial)，很可能在测试环境里系统识别不到这个名称，直接跳过了这条@font-face规则。
建议把可能的名称都补上，用逗号分隔覆盖更多场景：
```
src: local("Arial"), local("ArialMT"), local("Arial Regular");
```

font-weight范围不匹配
你给"Inter Fallback"设置了font-weight: 100 900;的宽范围，但Arial本身并没有这么全的字重——它通常只有400（正常）和700（粗体）两种字重。当页面文本使用了300、600这类Arial没有的字重时，浏览器会判定这个回退字体无法匹配当前文本，直接跳过它去用后面的原生Arial。
解决办法是拆分@font-face规则，分别定义对应字重的版本：

/* 正常字重 */
@font-face {
    font-family: "Inter Fallback";
    font-style: normal;
    font-weight: 400;
    src: local("Arial"), local("ArialMT");
    ascent-override: 90.199%;
    descent-override: 22.4836%;
    size-adjust: 107.4014%;
    font-display: swap;
}
/* 粗体字重 */
@font-face {
    font-family: "Inter Fallback";
    font-style: normal;
    font-weight: 700;
    src: local("Arial Bold"), local("ArialMT Bold");
    /* 这里需要调整对应度量值，匹配Inter粗体的排版 */
    ascent-override: XX%;
    descent-override: XX%;
    size-adjust: XX%;
    font-display: swap;
}

浏览器对local()的特殊校验
少数浏览器会对local()字体做额外校验，如果它发现你定义的"Inter Fallback"和后面的原生Arial本质是同一个字体（仅加了度量覆盖），可能会优先选择原生Arial而非你的自定义字体实例。不过这个情况比较少见，你可以先排查前两个原因。

另外，你可以用浏览器开发者工具辅助排查：打开Elements面板查看文本元素的Computed样式，确认实际生效的font-family是哪个；再去Sources面板看字体是否加载成功——如果"Inter Fallback"没被选中，说明浏览器没匹配到这条规则。

备注：内容来源于stack exchange，提问作者Petro Prots