由 css 模块加载时字体不起作用答案

【问题标题】：Fonts not working when loaded by css modules由 css 模块加载时字体不起作用
【发布时间】：2019-06-17 07:42:23
【问题描述】：

我正在使用带有 sass 的 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;
}

The most interesting path is that they actually loaded by the browser.

所以内联 css 看起来像这样：

@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; }

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

我的 webpack 配置的加载器：

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]',
          },
        },
      },
    }]

【问题讨论】：

更新：实际原因是文件加载器输出的不是真正的字体文件，而是输出 300 字节大小的东西。绝对不是真正的字体，而是损坏的字体。

标签： css webpack font-face css-modules react-css-modules

【解决方案1】：

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

@import url('https://fonts.googleapis.com/css?family=Montserrat');

但这只是一个创可贴，另一个问题是你在哪里使用该字体，如何将该字体添加到某个类很重要，例如对于蒙特塞拉特，你应该这样做

font-family: 'Montserrat', sans-serif;

【讨论】：