Question

我不能使用@ font-face自定义字体。

我已经修改了webpack的配置，这是我的package.json文件：

...
"electronWebpack": {
    "renderer": {
      "webpackConfig": "webpack.renderer.additions.js"
    }
  }
...

相应地，还有我的webpack.renderer.additions.js文件：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['css-loader']
            },
            {
                test: /\.hbs$/,
                use: ['handlebars-loader']
            },
            {
                test: /\.less$/,
                use: ['less-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            }
        ]
    }
};

在我的src/renderer/index.js中，包含我的.less文件：

...
require('../less/fonts.less');
...

这是我的src/less/font.less文件：

@font-face {
  font-family: 'SegoePrint';
  src:  url('../fonts/segoepr.eot') format('embedded-opentype'),
        url('../fonts/segoepr.woff') format('woff'),
        url('../fonts/segoepr.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

所有字体文件都位于src/fonts/中。

编译工作正常，但这是我在运行时在开发工具控制台中遇到的错误：

Failed to decode downloaded font: data:application/font-woff;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJiYzRmZmUxYjc2MDA5ZDYxMjFiNGJmN2RiMzQ1ZGI1Yy53b2ZmIjs
OTS parsing error: invalid version tag
localhost/:1 Failed to decode downloaded font: data:font/ttf;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJjNDU1ZDk0ZWVlNDNkYzRjZWViODNjMGMwZmQwZDRjOC50dGYiOw==
localhost/:1 OTS parsing error: invalid version tag

当然，我的HTML文件中的文本不能正确显示，我的意思是SegoePrint字体未应用，因为我有font: bold 27px SegoePrint;

我一直在搜索，但无法解决。我希望我足够清楚。有帮助吗？

Electron-webpack：无法加载自定义字体

0 个答案: