Electron应用自定义字体加载失败问题排查求助

问题根源 #

你当前的CSS相对路径理论上逻辑正确，但Electron的本地资源加载机制对相对路径的解析存在特殊处理，导致无法定位字体文件。另外，你之前尝试的app.setPath('resources', ...)属于错误用法——该API仅用于配置Electron内部的系统路径（如userData、appData等），而非自定义资源目录，因此触发了Promise拒绝警告。

可行解决方案 #

方案1：使用根相对路径（最简单） #

修改config.css中的字体路径为根相对路径（以/开头），直接指向应用根目录下的resources文件夹：

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

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

这种方式不受CSS文件所在位置影响，所有路径都会从应用根目录开始解析。

方案2：使用绝对路径（最可靠） #

通过Electron的预加载脚本暴露字体目录的绝对路径，动态生成字体规则，彻底规避路径解析问题：

1. 在项目根目录创建preload.js：

const { contextBridge, path } = require('electron');

// 向渲染进程安全暴露字体目录路径
contextBridge.exposeInMainWorld('appPaths', {
    fontsDir: path.join(__dirname, 'resources', 'fonts')
});

2. 修改main.js中的窗口配置，添加预加载脚本：

const { app, BrowserWindow, path } = require('electron');

function createWindow() {
    const mainWindow = new BrowserWindow({
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: true, // 保持开启，保障应用安全
            nodeIntegration: false
        }
    });
    mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

3. 在index.html中动态注入字体样式：

<script>
document.addEventListener('DOMContentLoaded', () => {
    const style = document.createElement('style');
    style.textContent = `
        @font-face {
            font-family: 'nexusBody';
            src: url('${appPaths.fontsDir}/DidactGothic-Regular.ttf');
        }
        @font-face {
            font-family: 'nexusCapiters';
            src: url('${appPaths.fontsDir}/OdibeeSans-Regular.ttf');
        }
    `;
    document.head.appendChild(style);
});
</script>

方案3：临时禁用Web安全（不推荐） #

如果上述方案都无效，可临时禁用Electron的Web安全机制（仅用于调试，生产环境绝对禁止）：

const mainWindow = new BrowserWindow({
    webPreferences: {
        webSecurity: false
    }
});

该方法会绕过同源策略和资源加载限制，存在明显安全风险。

验证方法 #

修改完成后重启Electron应用，打开开发者工具查看网络请求，确认字体文件返回200状态码，即可正常使用自定义字体。

内容的提问来源于stack exchange，提问作者João Lucas Hoffman