如何使用webpack内联CSS中的字体? [英] How to inline fonts in CSS with webpack?

问题描述

问题背景:我正在使用katex在页面上渲染一些数学运算.然后，我想创建该页面一部分的PDF版本，所以我创建一个HTML文档，其中包含要导出的部分，该部分内联所有CSS并将其传递给渲染器.渲染器无法访问节点资源，这就是内联所有内容的原因.除字体外，它运行完美.

Problem background: I am using katex to render some math on a page. I then want to create a PDF version of part of that page, so I create a HTML document that containing the part to be exported that inlines all CSS and pass it to the renderer. The renderer cannot access the node resources, that's why everything is inlined. It works perfectly, except for the fonts.

我尝试了url-loader和bas64-inline-loader，但是生成的字体没有内联.我在调试器中检查了生成的CSS，并且旧的URL仍然存在，没有字体的data-URL.

I tried both url-loader and bas64-inline-loader, but the generated fonts are not inlined. I inspected the generated CSS in the debugger, and the old URLs are still in, no data-URLs for the fonts.

这是我当前的webpack.config.js:

This is my current webpack.config.js:

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        "editor": './src/editor.js',
        "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
        "json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
        "css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
        "html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
        "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
    },
    output: {
        globalObject: 'self',
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: ['url-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'editor_text.html',
            template: 'src/editor_text.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'editor_markdown.html',
            template: 'src/editor_markdown.html',
            inlineSource: '/katex/.*'
        })
    ]
};

推荐答案

最好的方法是使用postcss-cli和postcss-inline-base64

The best way is to use postcss-cli and postcss-inline-base64

webpack:

{
  test: /\.(css|sass|scss)$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        sourceMap: true
      },
    },
    {
      loader: 'postcss-loader', // important
      options: {
        sourceMap: true,
        config: {
          path: './config/',
        },
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
      },
    },
  ],
}, {
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [{
    loader: 'file-loader',
  }]
},

创建配置文件夹宽度postcss.config.js

Create config folder width postcss.config.js

module.exports = {
  plugins: {
    'postcss-inline-base64': {
      baseDir: './sources/'
    },
  },
};

baseDir是字体的路径.在scss文件中，我以这种方式添加字体:

baseDir is the path to the fonts. In the scss file I add a font in this way:

@font-face {
  font-family: 'Lato-Light';
  src: url('b64---../fonts/Lato-Light.ttf---') format('truetype');
  font-weight: normal;
  font-style: normal;
}

由于这项工作，我们将字体很好地转换为base64 @ font-face {font-family:Lato-Light; src:url("data:font/ttf; charset = utf-8;base64，...

As a result of the work we have a nicely converted font to base64 @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

更新:我准备了一个小示例 postcss-inline-base64

UPDATE: I prepared a small example postcss-inline-base64

这篇关于如何使用webpack内联CSS中的字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！