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');
}

Webpack配置：

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

- gittenger

---

尝试使用.woff/.woff2字体可能是值得的，因为我之前在将其作为Web字体加载时曾遇到过损坏的.ttf字体问题。 - James Paterson

谢谢！我可以尝试一下。虽然它应该适用于两者，但值得注意的是，我在使用CSS-in-JS的其他项目中也使用了这个确切的.ttf文件，没有任何问题。 - gittenger

你检查过网络选项卡了吗？也许字体出现了404错误？ - ztom

嗯，我刚刚检查了一下，没有看到任何404错误，但在网络选项卡的字体选项卡中也没有看到任何请求或其他内容。 - gittenger

@gittenger 在标题中不要写“已解决”，请将最有帮助的答案标记为已接受（即使是你自己的答案）。我已经为您恢复了问题的更改，但您需要自己打勾。 - Shadow

很棒，谢谢。它说我可以在两天内标记自己的答案。我在这里提问还很新。谢谢。 - gittenger

Answer 1

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

换句话说，我错误地在font-family属性中在"Yusei Magic"之后包含了"sans-serif"。这不会导致错误，但它是不正确的CSS，因此是我的错误来源。感谢所有发表意见的人！

- gittenger

Answer 2

由于您在CSS中使用了相对路径url('./assets/fonts/yusei-magic/YuseiMagic-Regular.ttf')，为了使webpack能够解析这种CSS文件中的相对路径，您应该在webpack.config.js文件的规则数组中使用以下配置resolve-url-loader：

other loaders ...

{
    test: /\.(sa|sc|c)ss$/, // styles files
    use: ["style-loader",'css-loader' ,'resolve-url-loader', {
      loader: 'sass-loader',
      options: {
        sourceMap: true, 
      }
    }],
  },
  {
    test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, // to import images and fonts
    loader: "file-loader",
  },

第一个用于加载具有已解析URL的CSS / SCSS文件，第二个用于加载字体（当然，此模式也会加载图像：）。

- Amir H Rahimi

Answer 3

由于字体是通过 css 函数 url() 引用的，因此需要添加负责的 Webpack 加载器。

如果没有安装：

npm install --save-dev style-loader css-loader

规则堆栈应该是这样的：

 rules: [
   ...
   {
     test: /\.css$/i,
     use: ['style-loader', 'css-loader'],
   },
   {
     test: /\.(woff|woff2|eot|ttf|otf)$/i,
     type: 'asset/resource',
   },
   ...
 ]

细节可在这里（正在加载CSS）和这里（正在加载字体）找到。 css-loader会解释@import和url()，就像import/require()一样，并且会解析它们。

- ztom

---

谢谢。不过，我已经在使用css-loader和sass-loader了。抱歉，我没有包含完整的配置文件文本，因为我不想让问题变得臃肿。但是我的scss和css文件正在正确加载和应用样式。我唯一遇到的问题是字体在url()声明中没有被加载。我参考了您在原始帖子中提供的确切文档。 - gittenger

我正在集成字体时不小心将style-loader和MiniCssExtractPlugin.loader链接在一起。请注意适当使用它们，像这样：isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader。 - alexanderdavide