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

Question

什么不起作用

我正试图在我的Electron React应用程序中添加一些自定义的本地字体，但我想在不在电脑上安装字体的情况下完成。

当前部分解决方案

唯一对我有效的方法是在我的电脑上安装字体，但我想找到一个更好的解决方案。

我将字体文件放入：

资产/字体

我试着在我的scss文件中使用它，该文件位于：

src/render/scs/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,
}),

ReactApp组件已安装到上的index.ejs文件中

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

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

import './App.global.scss';

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

我希望这能帮助其他人。

谢谢！

Answer 1

很难说我们的设置有多相似，但希望这能帮助到一些人。

我的问题是，当字体应该在src下时，将它们放在我的公用文件夹中。

我在src下创建了一个fonts文件夹，然后在css文件中声明了字体。例如：

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

之后，我在index.js中导入了css，它起了作用：

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