Electron + Vue App 上未显示自定义字体

Question

我正在使用Vue + Electron开发应用程序，但我遇到了使用自定义字体的问题。在 Web 模式下运行应用程序时，与自定义字体一起使用的图标显示正常。但是当我使用电子构建器构建应用程序时，图标/自定义字体没有加载。

我在 index.html head 标签中导入自定义字体，自定义字体位于 src/renderer/assets/fonts 文件夹中。

任何帮助谢谢

Answer 1

要确保字体包含在电子中，请尝试以下操作：

在你的渲染器 main.js 中

import './scss/app.scss'

在你的“./scss/app.scss”中

@font-face {
    font-family: 'Your Custom Font';
    src: url('../assets/fonts/Your Custom Font.ttf');
}

这应该确保你的字体被 webpack 包含在电子中。