控制台“Noto Sans字体请求被拦截”提示的含义及解决方法

警告含义解析 #

这个警告来自Node.js环境的资源加载拦截机制，核心逻辑如下：

• 系统扫描到你声明的font-family列表里有Noto Sans，将其判定为需要加载的字体资源，但该请求的可见性级别为1，达不到系统要求的最低级别3。
• 可见性级别3对应的是「页面可见区域内的内容直接引用、属于高优先级加载」的场景；级别1则表示该字体只是备用选项，当前没有实际渲染需求，仅在font-family里占位。
• 为什么只有Noto Sans触发警告？因为列表里的ui-sans-serif、system-ui、Arial等都是系统内置的字体组或预装字体，不会触发网络加载请求；而Noto Sans虽然是备用，但部分开发环境会把它当成需要外部加载的字体，进而触发拦截规则。

解决办法 #

方法1：直接移除Noto Sans（最省事） #

既然Noto Sans只是备用，而sans-serif会自动回退到系统默认无衬线字体，完全可以把它从font-family列表里删掉，彻底避免触发请求：

.addFont {
  font-family: 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI',
    'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif', 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

方法2：确保本地预装Noto Sans #

如果一定要保留Noto Sans作为备用，检查你的开发设备是否已经安装了该字体。只要系统里有Noto Sans，浏览器会直接调用本地字体，不会发起网络请求，警告自然就消失了。

方法3：调整资源拦截规则 #

如果是开发服务器或安全工具（比如CSP策略、Node.js的字体拦截模块）导致的限制，可以做以下操作：

• 把Noto Sans添加到资源白名单；
• 放宽字体加载的可见性级别要求，允许级别1的请求通过。

内容的提问来源于stack exchange，提问作者Eli O.