由css模块加载时字体不工作

我将css模块与sass一起使用。所以我试着像这样加载它们：

@font-face {
  font-family: 'Book Antiqua';
  src: url(@/assets/fonts/book_antiqua.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url(@/assets/fonts/Montserrat/Montserrat-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Book Antiqua';
  src: url("http://localhost:8080/static/media/book_antiqua.d8ae129c.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Montserrat';
  src: url("http://localhost:8080/static/media/Montserrat-Regular.2bb14503.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

因此，内联css如下所示：

@font-face {
  font-family: 'Book Antiqua';
  src: url(@/assets/fonts/book_antiqua.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url(@/assets/fonts/Montserrat/Montserrat-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Book Antiqua';
  src: url("http://localhost:8080/static/media/book_antiqua.d8ae129c.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Montserrat';
  src: url("http://localhost:8080/static/media/Montserrat-Regular.2bb14503.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

但它们不起作用（所以我什么都不懂。浏览器加载的字体，字体的语法看起来不错，但它们不会触发

我的网页包配置的加载程序：

rules: [
      {
        exclude: [
          /\.html$/,
          /\.(js|jsx|ts|tsx)$/,
          /\.css$/,
          /\.json$/,
          /\.bmp$/,
          /\.gif$/,
          /\.jpe?g$/,
          /\.png$/,
          /\.scss$/,
        ],
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },

      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000',
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
            },
            'postcss-loader',
          ],
        }),
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                sourceMap: true,
                importLoaders: 1,
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
            },
            'sass-loader',
          ],
        }),
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
      },
      {
        test: /\.(ttf|eot|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]',
          },
        },
      },
    }]

---

我从不从我的资产中导入字体，我总是使用像谷歌字体这样的服务来获取我的字体，他们在那里，我像这样导入

@导入url（'https://fonts.googleapis.com/css?family=Montserrat');

<> P>但是这只是一个创可贴，另一个地方是一个问题，你可以在哪里使用这个字体，你怎么把这个字体添加到某个类是很重要的，比如对于普利茅斯，你应该这样做< /P>

字体系列：“蒙特塞拉特”，无衬线；

Update：实际原因是文件加载器输出的不是真正的字体，而是300字节大小的字体。肯定不是真正的字体，而是损坏的字体。