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

Custom font is not showing on Electron + Vue App(自定义字体未在 Electron + Vue App 上显示)
本文介绍了自定义字体未在 Electron + Vue App 上显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 Vue + Electron 开发一个应用程序,我在使用自定义字体时遇到了问题.在 web 模式下运行应用程序时,与自定义字体一起使用的图标显示正常.但是当我使用 electron-builder 构建应用程序时,图标/自定义字体没有加载.

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 头标签中导入自定义字体,自定义字体位于 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.

任何帮助谢谢

推荐答案

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

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 上显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

jsPDF cannot set font family(JsPDF无法设置字体系列)
initialising a global mixin in weex我使用 weex create awesome-project 初始化了一个 weex 和 vue 应用程序。在 entry.js 文件中,我试图注册一个全局 mix...
Correctly setup Eslint Airbnb with VScode in Vue project这是我没有 linting 的 Vuejs 代码。在我运行 之后 npm run lint --fix代码是这样的但我再次做...
TypeError: Cannot read property 'get' of undefined, Axios, Vue.JS尝试使用 axios 从 api 访问获取请求时,我从 Vue 收到这个奇怪的错误,我收到 TypeErro...
How to call a vue.js function on page load我有一个帮助过滤数据的功能。当用户更改选择时,我正在使用 v-on:change 但我还需要在用户选择数据之前调用该函...
How can I call method in the component from view? (vue.js 2)我的看法是这样的:[cc lang=javascript] England ...