Webpack 5字体资源问题，没有错误，但也没有字体

Question

我正在尝试在我的 scss 文件中使用 @font-face 声明。

正在应用正确的 CSS 规则，因此 font-face 声明看起来没问题。路径也已解决，所以这不是问题。而且，webpack 不会抛出任何错误，因此它似乎不是任何类型的加载器问题。但最终，浏览器仍然没有渲染该字体。（见图）

从 Webpack 5 开始，文档指出您可以在规则中声明“type: 'asset/resource'”以正确加载字体或图像等资源。它适用于我加载的图像，但不适用于字体。

CSS：

@font-face {
    font-family: 'Yusei Magic', sans-serif;
    font-style: normal;
    font-weight: 400;
    src: url('./assets/fonts/yusei-magic/YuseiMagic-Regular.ttf')
        format('truetype');
}

网页包配置：

module: {
...
        rules: [
            ...
            {
                test: /\.ttf$/,
                type: 'asset/resource',
            },
        ],
    },

Answer 1

当您在属性上定义@font-face声明时font-family，您必须只编写一个字符串，指示如何在以后的样式中引用字体。

换句话说，我错误地在属性中的“Yusei Magic”之后添加了“sans-serif” font-family。这并没有引发错误，但它是不正确的 CSS，因此是我的错误的根源。感谢任何插话的人！