Question

我目前正在尝试构建一个电子应用程序。我试图将自定义字体引入到我的应用程序中，并且在开发中，该自定义字体有效，但是，当将其编译为可用于生产环境的应用程序时，该字体不会通过。

我在此处放置了“裸露的骨头”应用程序以突出显示问题https://github.com/jacobluke121/electron-forge-font-issue-。我还在这里包括了相关代码。

我对问题的印象是我的Webpack配置有关。在webpack.renderer.config.js内部，我使用copy-webpack-plugin将资产从我的static文件夹移至.webpack/renderer文件夹。资产确实移入了生产环境，但是，在编译时，资产表示渲染器无法在开发人员控制台中找到它们，即使它们明确位于开发人员控制台的资源选项卡中也是如此。

下面包含的文件不是项目的所有文件，但我认为它们与我的问题最相关。

main.js又名电子面

const {app, BrowserWindow} = require('electron');
const electronLog = require('electron-log');

const main_log = electronLog.create('main')
//set console.log to main_log.log,
console.log = main_log.log;


let mainWindow;

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
    app.quit();
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', (event) => {
    event.preventDefault();
    mainWindow = new BrowserWindow({
                                       width: 1280, height: 960,
                                       webPreferences: {
                                           nodeIntegration: false,
                                           webSecurity: false,
                                           contextIsolation: true,
                                           enableRemoteModule: false,
                                           preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY
                                       }
                                   });

    mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);


    mainWindow.webContents.openDevTools();


    // if closed then end application:
    mainWindow.on('closed', function () {
        main_log.info('%c Closing. %c The application', 'color: red', 'color: green');
        mainWindow = null;
    });
});

// Quit when all windows are closed.
app.on('window-all-closed', () => {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    // On Mac OS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) {

        mainWindow = new BrowserWindow({
                                           width: 1280,
                                           height: 960,
                                       });
        mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
    }
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.jsx

import React, {Component} from 'react';
import './app.css';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {

    render() {
        return (
            <div>
                <p className="san-serif">This is supposed to be Calibril Light in Production but it's not...</p>
                <p className="san-serif">however, when you run 'yarn start' its the correct font-family</p>
                <p className="san-serif">When in production if you look in the dev console tools, you can see that the font family is there under resources...</p>
            </div>)
    }
}

export default App;

app.css

@font-face {
  font-family: "Calibri Light2";
  font-style: normal;
  font-weight: normal;
  src: url("/fonts/calibril.woff") format("woff");
}
.san-serif {
  font-family: "Calibri Light2";
}

/*# sourceMappingURL=app.css.map */

webpack.main.config.js

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: './src/electron/main.js',
  // Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    extensions: ['.js', '.jsx', '.css', '.woff']
  },
};

webpack.renderer.config.js

const rules = require('./webpack.rules');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const assets = ["fonts"]

module.exports = {
    // Put your normal webpack config below here
    module: {
        rules,
    },
    resolve: {
        extensions: ['.js', '.jsx', '.css', '.woff'],
    },
    plugins: assets.map(asset => {
        return new CopyWebpackPlugin({
                                         patterns : [
                                             {
                                                 from: path.resolve(__dirname, 'static', asset),
                                                 to: path.resolve(__dirname, '.webpack/renderer', asset)
                                             }
                                             ]
                                     });
    }),
}

webpack.rules.js

const path = require('path');

module.exports = [
    // Add support for native node modules
    {
        test: /\.node$/,
        use: 'node-loader',
    },
    {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|.webpack)/,
        loaders: [{
            loader: 'babel-loader'
        }]
    },
    {
        test: /\.css$/,
        use: [{loader: 'style-loader'}, {loader: 'css-loader'}],
    },
    {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/'
                }
            }
        ]
    },
]

非常感谢您的帮助，如果无法正常工作，我将不得不使用另一个电子包装器。

感谢您的帮助。

Answer 1

经过多次打击和试验，我今天面临同样的问题只在规则中添加这个对我有用，而不使用任何额外的插件

{
    test: /\.(ttf|otf|eot|svg|woff2|woff)$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: "[path][name].[ext]",
                publicPath: "../",
            },
        },
    ],
}

在带有 webpack 插件的 electron-forge v6.0.0 中

进口资产发行，电子伪造

1 个答案: