Question

我有这个CSS：

@font-face{
    font-family:IranSans;
    font-style:normal;
    font-weight:bold;
    src:url("/assets/fonts/IranSansWebBold.eot");
    src:url("/assets/fonts/IranSansWebBold.eot?#iefix") format("embedded-opentype"),url("/assets/fonts/IranSansWebBold.woff2") format("woff2"),url("/assets/fonts/IranSansWebBold.woff") format("woff"),url("/assets/fonts/IranSansWebBold.ttf") format("truetype");
}

我在assets文件夹和fonts文件夹中有字体。名字是正确的。

然而，Webpack无法为他们提供服务并返回404.我无法找到原因。我在这里想念什么？

Answer 1

使用npm i file-loader -D

安装文件加载器

  {
    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          outputPath: 'fonts/',
          name: '[name][hash].[ext]',
        },
      },
    ],
  },

然后在你的css文件中

@font-face {
    font-family: 'GothamPro';
    src: url('./fonts/GothamPro.eot?') format('eot'), 
         url('./fonts/GothamPro.otf')  format('opentype'),
         url('./fonts/GothamPro.woff') format('woff'), 
         url('./fonts/GothamPro.ttf')  format('truetype'),
         url('./fonts/GothamPro.svg#GothamPro') format('svg');
}

文件加载器将输出build / fonts /目录中的所有ur字体文件

如果你想在JavaScript包中插入字体文件，你也可以使用url-loader

WebPack不提供字体

1 个答案: