新版本Firefox/Chromium本地安装字体后无法加载Webfont问题咨询

现象回顾 #

本地服务器通过CSS @font-face 引入了多格式（eot、woff2、woff、ttf、svg）的Roboto Webfont，但新版本Firefox（107+）和Chromium（110+）的开发者工具网络面板中不再显示该字体的加载请求；删除Windows字体文件夹中已安装的Roboto后，两款浏览器恢复加载Webfont。旧版本浏览器无论本地是否安装该字体，都会加载Webfont。

疑问解答 #

1. Roboto是否随Windows 11最新更新预装？ #

是的，Windows 11的22H2版本及后续部分累积更新中，已将Roboto作为系统预装字体加入，用于统一系统UI的字体风格，因此多数更新后的Windows 11系统会自带该字体。

2. CSS相关规范是否有变更？ #

CSS @font-face的核心规范没有发生变更，但现代浏览器的字体匹配逻辑做了优化。@font-face 中src: local(...)的设计初衷就是优先使用本地已安装的对应字体，避免冗余网络请求。新版本Firefox和Chromium严格遵循了这个设计逻辑，检测到本地存在匹配的Roboto字体时，就不再发起Webfont加载请求；而旧版本浏览器的匹配逻辑不够严谨，即使本地有字体，仍会加载Webfont资源。

3. 此前是否不支持src: local(...)语法？ #

不是，src: local()语法很早就被主流浏览器支持（比如Chrome 4+、Firefox 3.5+），只是旧版本浏览器的字体匹配机制存在缺陷：要么对字体名称的匹配不够精准，要么没有严格执行local()的优先级逻辑，导致即使本地有对应字体，仍会触发Webfont的网络请求。新版本浏览器修复了这个问题，严格按照规范优先使用本地字体，因此不再加载Webfont。

内容的提问来源于stack exchange，提问作者Ham