时间戳

首页 > 解决方案 > Webpack 不会呈现自定义字体

javascript - Webpack 不会呈现自定义字体

问题描述

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

我正在尝试加载自定义字体。我严格遵循官方教程， 我的字体在我的 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

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

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

标签： javascriptcsswebpackfonts

解决方案

First, the format for a .ttf file should be truetype.

If that doesn't work:
The best way to make sure that fonts are probably going to work depends on what browser you are using with which file format. Nowadays, many browsers are drifting towards 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.

推荐阅读