谷歌扩展替换新标签页时引入的字体无法显示如何修复

Chrome 扩展（当前主流为 Manifest V3 版本）运行在严格内容安全策略（CSP）约束的独立上下文，权限规则和普通网页环境完全不同：

• 扩展页面默认 CSP 禁止通过@import引入非本地的跨源样式资源
• 同时默认拦截所有未做权限声明的外部字体文件请求
  单独访问index.html时属于普通网页场景，不受扩展CSP规则限制，字体可以正常加载；作为新标签页扩展运行时，远程字体样式、字体文件的请求都会被浏览器拦截，最终字体会回退到系统默认等宽字体。

方案1（官方推荐，适配审核要求）：本地化字体资源 #

这是最稳妥的实现方式，不依赖外部网络，也不会触发安全拦截：

• 提前下载需要的 Inconsolata 500字重字体文件（优先选WOFF2格式，兼容性好体积小），存到扩展本地目录，比如新建fonts文件夹存放字体文件
• 删除原有@import远程引入字体的代码，替换为本地@font-face声明，参考代码：

<style>
    @font-face {
      font-family: 'Inconsolata';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('./fonts/Inconsolata-Medium.woff2') format('woff2');
    }

    html {
      font: 22px/1 'Inconsolata', monospace !important;
    }
</style>

修改后重新加载扩展即可正常显示字体。

方案2：修改CSP配置放行指定远程源（不推荐，可能影响商店审核） #

如果不想做字体本地化，可以手动在扩展的manifest.json中配置CSP规则，将字体相关域名加入可信列表，Manifest V3 配置参考：

{
  "manifest_version": 3,
  "version": "1.0",
  "name": "自定义新标签页",
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "content_security_policy": {
    "extension_pages": "default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'self';"
  }
}

配置完成后重启扩展，即可正常加载远程字体。注意该方案需要声明外部资源访问权限，提交Chrome扩展商店审核时可能需要额外提交权限使用说明。

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