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

Question

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

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

我应该捆绑我的字体，还是有更好的方法来做到这一点，以便我仍然可以使用 webpack，但让浏览器下载并仅使用适合它的字体？

Answer 1

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

同时考虑仅使用 woff2 和 woff(按此顺序)。 Woff 最有可能是 supported in all browsers you need ，而 woff2 只是它之上的一个不错的奖励。 eot、ttf 和 svg 不再那么有用了。

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