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

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

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

Answer 1

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

如果这不起作用：
确保字体可能正常工作的最佳方法取决于您使用哪种文件格式的浏览器。如今，许多浏览器都在向 WOFF 和 WOFF2 字体类型倾斜，但是 ttf should work with most browsers。您可以阅读更多here。您可以使用 https://transfonter.org 来转换字体类型。您还可以查看this question。

Webpack 不会渲染自定义字体

1 个答案: