运行 Windows 安装程序后，Electron + React 应用程序中的自定义字体不起作用

Question

我正在构建一个需要在 Windows 上运行的 Electron 应用程序。堆栈存在 React + Typescript、SCSS + TailwindCSS。样式是用 postcss 编译的。 Electron 应用是使用electron-builder 构建的。

编译样式后，为 Windows 创建新的 Electron 安装程序并运行此安装程序，包含的字体似乎不起作用。

检查用作electron-builder 输出文件夹的build 文件夹时，所有字体文件都存在于static/media 文件夹中。如果我在 Electron 应用程序运行时检查字体文件的链接，CSS 中的链接也会链接到生成的文件所在的static 文件夹。

文件和代码

• 字体文件位于：src/assets/font/;
• 对于我使用的每个权重（仅 2 个），有：.ttf、.woff、woff2、.svg 和 .eot 可用；
• 字体是通过SASS加载的：

@font-face {
    font-family: 'Montserrat';
    font-weight: 500;
    src: url('../font/Montserrat-Medium.ttf') format('truetype'),
         url('../font/Montserrat-Medium.woff2') format('woff2'),
         url('../font/Montserrat-Medium.woff') format('woff'),
         url('../font/Montserrat-Medium.svg') format('svg'),
         url('../font/Montserrat-Medium.eot') format('eot');
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 700;
    src: url('../font/Montserrat-Bold.ttf') format('truetype')
         url('../font/Montserrat-Bold.woff2') format('woff2'),
         url('../font/Montserrat-Bold.woff') format('woff'),
         url('../font/Montserrat-Bold.svg') format('svg'),
         url('../font/Montserrat-Bold.eot') format('eot');
}

• 然后将其作为基本字体加载到 TailwindCSS 中，在 tailwindconfig 中进行配置：

theme: {
    fontFamily: {
        sans: ['Montserrat', 'sans-serif'],
        body: ['Montserrat'],
        bold: ['Montserrat']
    },
... rest of config file

事实

• 如果在 Windows 上本地安装该字体，则该字体可以工作。
• 找不到时，应用不会回退到 sans-serif 字体。
• 在正在运行的应用程序（Chromium 元素检查器）中检查 CSS 时，字体文件和字体文件的链接是正确的。
• 所有其他样式都可以正常工作，只有字体不工作。所以看起来 CSS 已正确编译和加载。

已检查资源

• Custom font is not showing on Electron + Vue App（是的，它是 Vue，但答案仍然是：使用 @font-face）。
• https://www.reddit.com/r/electronjs/comments/bhaiva/how_to_load_custom_fonts_in_electron_app/
• https://discuss.atom.io/t/how-to-use-specific-font-in-electron-app/32215
• https://github.com/electron-userland/electron-webpack/issues/163
• https://dev.to/theola/electron-app-with-webpack-bootstrap-fontawesome-and-jquery-a-complete-guide-54k2

问题

1. 运行使用electron-builder 创建的installer.exe 时，是否需要在安装文件夹中包含资产文件夹和/或其他文件（例如：builder-effective-config.yaml）？
2. 还有其他方法可以包含本地字体吗？我不想使用 CDN 或其他在线资源。

我目前发现的所有资源都说在使用@font-face 时应该可以工作。

注意：如果您需要更多信息，请告诉我，我会提供。

Answer 1

好的，经过更多测试/检查，问题是 React 构建。它加载了一个旧配置，这破坏了字体加载。

感谢所有阅读它的人！