运行 Windows 安装程序后，Electron + React 应用程序中的自定义字体无法正常工作

Question

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

构建的

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

当检查用作 electron-builder 输出文件夹的 build 文件夹时，所有字体文件都存在于 static/media 文件夹中。如果我在 Electron 应用程序运行ning 时检查字体文件的 link，CSS 中的 link 也会 links 到生成的 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 字体。
在运行ning 应用程序（Chromium 元素检查器）中检查 CSS 时，字体文件和 link 字体文件是正确的。
所有其他样式都可以正常工作，只有字体不工作。所以看起来 CSS 已正确编译和加载。

已检查资源

（是的，它是 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

问题

当运行使用electron-builder创建的installer.exe时，是否需要在安装文件夹中包括资产文件夹and/or其他文件（例如： builder-effective-config.yaml)?
是否有其他方法来包含本地字体？我不想使用 CDN 或其他在线资源。

我目前找到的所有资源都说它应该在使用 @font-face 时有效。

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

Answer 1

好的，再 testing/checking 问题是 React 构建。它加载了一个较旧的配置，这会破坏字体加载。

感谢所有阅读的人！

运行 Windows 安装程序后，Electron + React 应用程序中的自定义字体无法正常工作

Custom font in Electron + React application not working after running the Windows installer

font-face

reactjs

electron

electron-builder