如何将本地字体集成到 Electron React Boilerplate 应用程序中？

Question

什么不起作用

我正在尝试将一些自定义本地字体添加到我的 Electron React 应用程序中，但我想在不在计算机上安装字体的情况下执行此操作。

当前部分解决方案

对我有用的唯一方法是在我的计算机上安装字体，但我想找到更好的解决方案。

我将字体文件放入：

资源/字体/

我尝试在位于以下位置的 scss 文件中使用它：

src/渲染器/scss/commons/_fonts.scss

这样：

@font-face {
  font-family: 'Bariol Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Bariol Regular'),
    url('/assets/fonts/Bariol-Regular.ttf') format('ttf');
  }

这些是我当前的 Electron 版本

"electron": "^15.1.0",
"electron-builder": "^22.11.7",
"electron-devtools-installer": "^3.2.0",
"electron-notarize": "^1.1.1",
"electron-rebuild": "^3.2.3",

html是如何加载到电子中的：

    new HtmlWebpackPlugin({
      filename: path.join('index.html'),
      template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true,
      },
      isBrowser: false,
      env: process.env.NODE_ENV,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: webpackPaths.appNodeModulesPath,
    }),

React App组件已挂载到上的index.ejs

文件中

<div id="root"></div>

包含字体规则的 scss 文件已导入到 App.tsx 文件中。

import './App.global.scss';

如果有人能帮助我，我将不胜感激。

我希望这可以帮助别人。

谢谢！

Answer 1

很难说我们的设置有多相似，但希望这对某人有帮助。

我的问题是将字体放在我的公共文件夹中，而它们应该位于

src

下。

我在

fonts

下创建了一个

src

文件夹，然后我在css文件中声明了字体。例如：

/* src/index.css */
@font-face {
  font-family: 'KleeOne';
  src: url('./fonts/KleeOne-SemiBold.ttf');
}

之后，我在我的

index.js

中导入了CSS并且它起作用了：

/* src/index.js */
import './index.css';

Answer 2

vue.config.js

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
    transpileDependencies: true,
    pluginOptions: {
        electronBuilder: {
            customFileProtocol: './', // TRY THIS CODE
        },
    },
});