如何将字体添加到Webpack构建中？

Question

如何在webpack项目中添加字体？我相信，在查看了十几个webpack指南后，我仍然找不到实际的解决方案来添加字体。我没有使用React，而是使用可以在这里找到的样板：https://github.com/sandrina-p/essential-webpack-boilerplate 文件夹结构如下：

src
|-fonts
|-scripts
|-styles
index.thml

我已经将以下内容添加到我的配置文件中：

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: 'file-loader?name=/fonts/[name].[ext]'
},

我正在将字体族导入到我的CSS中，就像这样：

@font-face {
  font-family: 'MPR' !important;
  src: url('/styles/MPR.ttf') format('ttf'),
}



h2 {
    font-family: 'MPR';
}

我没有收到任何错误提示，但是h2标签没有显示字体，而是默认使用了times new roman。如果您能提供一些见解，我将不胜感激，因为我真的不想重新构建我的整个gulp项目，只是为了使用一个字体。

- Charlie

Answer 1

我猜你需要添加相对路径而不是绝对路径来指定 URL。 https://survivejs.com/webpack/loading/fonts/index.html#integrating-font-awesome-to-the-project - 这个链接可以帮助你将 Font Awesome 集成到项目当中。

- Miguel Palau

---

是的，那是其中一部分。我发现如果我创建一个定义了字体的CSS文件，然后将其导入到我的主JS文件中，它就能正常工作。而且，是的，我还必须更改我的路径。 - Charlie