如何在 webpack 构建中添加字体？答案

【问题标题】：How to add a font to webpack build?如何在 webpack 构建中添加字体？
【发布时间】：2017-11-03 00:19:40
【问题描述】：

如何在 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 中重建我的整个项目。

【问题讨论】：

标签： webpack fonts webpack-2 webpack-loader

【解决方案1】：

我的猜测是你需要为 url 添加相对路径而不是绝对路径

https://survivejs.com/webpack/loading/fonts/index.html#integrating-font-awesome-to-the-project

【讨论】：

是的，这是其中的一部分。我发现如果我创建了一个定义我的字体的 css 文件，然后将其导入到我的主 js 文件中，那么它就可以工作了。是的，我也必须改变我的道路。