Electron + Vue App 上未显示自定义字体 [英] Custom font is not showing on Electron + Vue App

问题描述

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

I am developing an app using Vue + Electron and im facing an issue using custom fonts. When running the app in web mode, the icons used with the custom font show ok. But when i build the app using electron-builder, the icons/custom font are not loaded.

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

I import the custom font in the index.html head tag and the custom fonts are located in src/renderer/assets/fonts folder.

任何帮助谢谢

推荐答案

要确保该字体包含在 Electron 中，请尝试以下操作:

To make sure that the font is included in electron, try something like this:

在你的渲染器 main.js 中

In your renderer main.js

import './scss/app.scss'

在你的./scss/app.scss"中

In your './scss/app.scss'

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

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

This should make sure that your font is included with electron by webpack.

这篇关于Electron + Vue App 上未显示自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！