如何在 Electron 应用中正确加载自定义字体文件

electron 中因路径解析机制特殊，css 中相对路径引用 `../resources/fonts/` 时易触发 `err_file_not_found`；根本解法是补全 `format()` 声明并确保资源路径在渲染进程可访问。

在 Electron 应用中使用自定义字体时，即使文件结构合理、路径书写无误，仍常遇到浏览器控制台报错 Failed to load resource: net::ERR_FILE_NOT_FOUND，而主进程无任何日志输出——这通常不是文件缺失，而是 渲染进程（WebView）对 file:// 协议下字体路径的解析与 MIME 类型识别存在限制。

✅ 正确声明 @font-face：必须指定 format()

CSS 规范要求，当使用 url() 加载字体时，显式声明 format() 是最佳实践，且对 Electron 渲染进程尤为关键。未声明时，部分 Chromium 版本（尤其是 Electron 内嵌版本）可能无法正确识别 .ttf 或 .otf 文件类型，导致加载失败。

请将你的 config.css 中的字体声明修改为：

@font-face {
  font-family: 'nexusBody';
  src: url('../resources/fonts/DidactGothic-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'nexusCapiters';
  src: url('../resources/fonts/OdibeeSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

? 注意：format('truetype') 中的 'truetype' 必须加单引号（符合 CSS 规范），不可写作 format(truetype)（无引号会被视为无效标识符）。

? 路径有效性验证：确保 file:// 协议可访问

Electron 渲染进程通过 file:// 协议加载本地 HTML/CSS，其路径解析基于 HTML 文件所在目录（即 index.html 的位置）作为根。你当前结构为：

Midjourney

当前最火的AI绘图生成工具，可以根据文本提示生成华丽的视觉图片。

下载

project/
├── index.html          ← 渲染入口（base path）
├── main.js
├── css/
│   └── config.css         ← @import 或 @font-face 中的 ../resources/ 是从 index.html 出发向上查找
└── resources/
    └── fonts/
        ├── DidactGothic-Regular.ttf
        └── OdibeeSans-Regular.ttf

因此 url('../resources/fonts/xxx.ttf') 在逻辑上是正确的——但需确认两点：

• ✅ index.html 确实位于项目根目录（而非子目录如 dist/index.html）；
• ✅ 构建/打包后资源未被遗漏（如使用 electron-builder，需在 build.files 或 extraResources 中显式包含 resources/fonts/**/*）。

⚠️ 不要滥用 app.setPath('resources', ...)

app.setPath('resources', ...) 用于重定向 Electron 内部资源目录（如 asar 解包路径、默认图标等），与前端静态资源完全无关。强行设置会导致 Error: Failed to set path（该 API 仅允许在 app.ready 之前同步调用，且 'resources' 是只读路径，不可重设）。删除该行是正确选择。

✅ 验证与调试技巧

1. 直接在浏览器地址栏打开 file:// 路径：
   复制 config.css 中的完整字体 URL（如 file:///path/to/project/resources/fonts/DidactGothic-Regular.ttf），粘贴到 Chrome 地址栏——若能下载或预览字体，说明路径有效；若 404，则检查项目实际路径是否与代码一致。

2. 启用 DevTools 网络面板过滤字体请求：
   在渲染进程 DevTools → Network → Filter 输入 font，查看请求状态码与实际请求 URL，确认是否因路径拼接错误（如多出 / 或编码问题）导致 404。

3. 备用方案：转为 Base64 内联（适合小字体）
   若路径问题持续存在，可临时将 TTF 转为 Base64（注意体积膨胀）：

   @font-face {
     font-family: 'nexusBody';
     src: url('data:font/truetype;charset=utf-8;base64,...') format('truetype');
   }

✅ 总结：三步确保字体生效

遵循以上方案，即可在保持清晰目录结构（字体独立于 CSS）的前提下，稳定加载自定义字体，无需妥协将字体文件挪至 css/ 目录。