无法使用webpack和vuejs加载字体

Question

我在vuejs上使用字体时遇到了一些问题，尽管没有出现任何错误，但我的字体文件存放在正确的文件夹中，我的webpack配置似乎也是有效的。

顺便说一下，我使用less，但我也安装了less-loader。

我的做法如下：

@font-face {
  font-family: 'montserrat-extralight';
  src: url('../assets/fonts/montserrat-ExtraLight.ttf') format('truetype');
  font-family: 'montserrat-light';
  src: url('../assets/fonts/montserrat-Light.ttf');
}

下面是我的 webpack.config 文件中定义 url-loader 的代码：

{
  test: /\.(woff|woff2|otf|eot|ttf|svg)(\?.*$|$)/,
  loader: 'url-loader?importLoaders=1&limit=100000'
}

我发现有很多人遇到了相同的问题，但实际上我找不到解决方法。

PS：我的字体没有在开发者模式下的网络选项卡中上传...

- Loïc Monard

---

首先，我认为单个@font-face不能指定多个字体（每个@font-face应该只有1种字体）。按照你的写法，最后一个font-family属性会覆盖之前的任何属性。虽然这样做仍然至少会加载一种字体，但这不是唯一的问题。 - seven-phases-max

我已经用这种方式做了很多次，这个语法没有任何问题！但是正如你所说，这不是唯一的问题~ - Loïc Monard

Answer 1

你的配置看起来很正常，但是尝试移除limit参数，它可能会解决你的问题，因为字体文件很容易超过100K。

- Tarik Chakur

Answer 2

好的，我终于找到了一种使用自定义字体的方法：

我有正确的语法，但我只需要使用.woff或.woff2字体文件，而不是.ttf或.otf。我无法解释为什么它不再起作用，但我得到了我想要的，所以没关系~

- Loïc Monard

Answer 3

new OptimizeCSSPlugin({cssProcessorOptions: {
    safe: true
}}),

- 郭玉成

---

你能解释为什么你的解决方案有效吗？这样可以提高你的贡献价值。 - Noel Widmer