Webpack 不会渲染自定义字体

Question

我正在使用 webpack 开发一个小项目。

我正在尝试加载自定义字体。我严格按照官方教程here 我的字体在我的 src 文件夹中。

这是我的 webpack 配置文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports= {
    mode: 'development',
    entry: {
        index: './src/main.js',
        elements: './src/elements.js'
    },
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Development',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',

            },
        ],
    },

    devServer: {
        contentBase: './dist',
    },

    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean:true,
    },

};

这是我的 css 文件字体：

@font-face {
    font-family: 'Sarpanch';
    src: url('./Sarpanch-Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: auto;
}
@font-face {
    font-family: 'pfunked';
    src: url('./PFUNKED.ttf') format('ttf');
    font-weight: 400;
    font-style: auto;
}
@font-face {
    font-family: 'Rudelskopf';
    src: url('./Rudelskopf Deutsch.ttf') format('ttf');
    font-weight: 400;
    font-style: auto;
}
@font-face {
    font-family: 'wearealien';
    src: url('./wearealien.ttf') format('ttf');
    font-weight: 400;
    font-style: auto;
}

例如，h1

#header h1 {
    font-family: 'wearealien';

}

当我加载页面时，字体不呈现。如果我使用 devtool 检查，font-family: 'werealienn' 没有被交叉，它似乎处于活动状态，但如果我取消选中该框，则不会发生任何事情。此外，似乎 webpack 确实找到了字体并将其装瓶，因为 url 现在类似于

http://localhost:8080/8ac2a6173dd38f2383fd.ttf

如果我手动输入url，字体会下载

我在控制台中没有收到任何错误，看起来一切正常，但字体没有呈现。我没主意了

Answer 1

首先，.ttf 文件的格式应为 truetype。

如果这不起作用：
确保字体可能正常工作的最佳方法取决于您使用的浏览器和文件格式。现在很多浏览器都在向 WOFF and WOFF2 font types, but ttf should work with most browsers. You can read more here. You can use https://transfonter.org to convert font types. You can also check out this question.

靠拢

Webpack 不会渲染自定义字体

Webpack won't render custom fonts

javascript

css

webpack

fonts