Vue 2项目构建后谷歌字体Encode Sans无法加载问题求助

我在Vue 2项目中使用Encode Sans字体时，遇到本地环境显示正常但构建后字体失效的问题，尝试过全局样式表@import和public/index.html添加<link>标签两种引入方式均未解决，且倾向于不本地部署字体。以下是实际可行的排查与解决思路：

1. 修复CSS压缩导致的字体名称异常 #

打包工具压缩CSS时，可能会误处理字体名称的引号，导致字体无法识别。给字体名添加双引号，避免被优化工具篡改：

@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;600;700;800&display=swap');

body {
  font-family: "Encode Sans", sans-serif;
  background: $backgroundColor;
}

2. 解决跨域与CSP限制 #

Google Fonts的字体文件实际从fonts.gstatic.com域名加载，部分部署环境的内容安全策略（CSP）可能会拦截该请求。检查浏览器控制台的网络请求面板，若字体文件加载失败，需在服务器配置或项目CSP规则中添加：

font-src https://fonts.gstatic.com;

3. 改用预加载确保字体优先加载 #

在public/index.html中添加预加载标签，强制浏览器优先加载字体文件，避免页面渲染时字体未就绪：

<link rel="preload" href="https://fonts.gstatic.com/s/encodesans/v21/QdVUSTchPBm7nuUeVf70viFluW44Tqg.woff2" as="font" type="font/woff2" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">

注：上述woff2链接可从Google Fonts提供的@import地址中提取，确保匹配你需要的字重版本。

4. 调整打包工具的CSS配置 #

若使用vue-cli构建项目，在vue.config.js中调整CSS提取规则，避免因样式加载顺序问题导致字体样式被覆盖：

module.exports = {
  css: {
    extract: {
      ignoreOrder: true
    }
  }
}

5. 强制字体样式优先级 #

通过!important标记，确保全局字体样式不会被局部组件的样式覆盖：

body {
  font-family: "Encode Sans", sans-serif !important;
}

效果对比：

• 构建后效果：
• 本地环境效果：

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