我应该使用带有字体的 webpack 吗？

Posted 2023-03-07

【中文标题】我应该使用带有字体的 webpack 吗？

【英文标题】：Should I be using webpack with fonts?

【发布时间】：2016-09-24 15:49:14

【问题描述】：

我使用 webpack 作为我的构建工具，我的 UI 使用 Bootstraps 免费的 Glyphicons。我目前正在使用 url-loader、捆绑 woff、woff2、eot、ttf 和 svg 捆绑我的字体（字形图标）。但这是正确的做法吗？

我的理解是，如果您在 CSS 中指定 woff、woff2、eot、ttf 和 svg 字体，浏览器将决定最适合哪个字体，然后下载它——而不是下载其余字体。但是通过 webpack 捆绑字体肯定意味着每个浏览器（以及设备、平台）都可以获得每种字体。

我应该捆绑我的字体，还是有更好的方法让我仍然可以使用 webpack，但让浏览器下载并只使用适合它的字体？

【参考方案1】：

你应该只使用文件加载器，而不是 url-loader。浏览器必须执行额外的请求，但这通常不是什么大问题。

还可以考虑仅使用 woff2 和 woff（按此顺序）。 Woff 很可能是supported in all browsers you need，而 woff2 只是一个不错的奖励。 eot、ttf 和 svg 不再那么有用了。

如果你真的想内联字体，只需内联 woff 即可。它并不比 woff2 大很多，并且如上所述，几乎可以在任何地方使用。但请记住，每次 CSS 更改都会导致字体重新下载，而使用 file-loader 时 URL 不会更改，这意味着它只会从浏览器缓存中提供给回访者。

【讨论】：

感谢@Ambroos，但我不确定这是否能回答我的问题。即使我只是使用 woff 和 woff2（我不确定我能做到，因为我们可能需要支持 不在我的字体中使用 webpack 吗？

你不应该离开 Webpack，没有必要。不过捆绑还是有区别的。如果你使用 url-loader，小文件会被内联到你的 CSS 中。这意味着你的字体将以不同的格式嵌入到 CSS 文件中，这意味着你会失去效率。使用 file-loader（或 url-loader 和更大的文件），您仍然只是在 CSS 中获得一个 URL。浏览器足够聪明，只下载最适合它们的字体文件。与没有 Webpack 的情况完全相同，但没有文件名散列的好处。