与 webpack 捆绑时，TTF 字体不显示在浏览器中答案

【问题标题】：TTF fonts don't display in the browser when bundling with webpack与 webpack 捆绑时，TTF 字体不显示在浏览器中
【发布时间】：2020-01-18 07:12:58
【问题描述】：

我正在尝试将静态网页与 webpack 捆绑在一起。 npm run build 工作得很好，所有的 javascript、sass、字体和图像资产都被压缩并发送到 dist 文件。问题是浏览器不显示我的字体。这就是我的 webpack 配置文件的样子

module.exports = {
  entry: './public/app.js',
  output: {
    path: __dirname + '/public/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.(scss)$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: [
        { loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            useRelativePath: true,
            outputPath: 'assets/images'
          } 
        }
      ]
    },
       {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          { loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            useRelativePath: true,
            outputPath: 'assets/fonts'
          } 
        }
        ]
      }
    ]
  }
}

我尝试过使用字体加载器，我尝试过使用 url 加载器，我尝试过使用专门用于 ttf 的加载器，即 ttf-loader。我已经尝试对上面引用的代码进行各种排列 as suggested here ，我尝试将 sourceMap=true 添加到 sass 加载器。我尝试将字体转换为其他格式，但没有成功。

我的猜测是我在 Sass 文件中导入字体的方式有问题，因为我构建时表面上没有任何问题。

@font-face {
  font-family: "Oswald-Light";
  src: url("../assets/fonts/Oswald-Light.ttf") format("truetype"),
       url("../assets/fonts/Oswald-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Oswald-Regular";
  src: url("../assets/fonts/Oswald-Regular.ttf") format("truetype"),
       url("../assets/fonts/Oswald-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-Regular.ttf") format("truetype"),
       url("../assets/fonts/Lato-Regular.ttf") format("truetype");
}

上面的代码有什么明显的错误吗？

【问题讨论】：

如果不设置 webpack 环境来测试您的代码，这很难说。将您的代码与 webpack 文档 (webpack.js.org/guides/asset-management/#loading-fonts) 进行比较，我没有发现任何问题。
我知道这让我非常沮丧。不过我现在有一个工作。

标签： javascript css webpack fonts

【解决方案1】：

对于其他在未来努力做到这一点的人 - 看到一些线程提出类似的问题 - 考虑使用 Google 字体并在头部插入一个链接标签。

<link href="https://fonts.googleapis.com/css?family=Lato|Oswald&display=swap" rel="stylesheet">

【讨论】：

尽管投了反对票，但这确实有效，并且可以节省随着本地提供的字体文件的大小增加 webpack 包的大小。