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

标签 css twitter-bootstrap twitter-bootstrap-3 fonts webpack

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

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

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

最佳答案

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

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

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

关于css - 我应该使用带有字体的 webpack 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37464264/

相关文章:

javascript - 如何在 iframe 之外使用 jquery 应用 css

html - angularjs中未捕获的语法错误

css - 需要有关 css 的简单帮助

javascript - 快速单击时跳过 jQuery 动画

html - CSS - 限制行数或字符数

javascript - jquery 多个输入字段的总和(如果一个输入中有相同的类)

html - Bootstrap 表行悬停,但某些行除外

twitter-bootstrap-3 - React Bootstrap 工具提示,如何触发它?

css - Bootstrap面板标题,左右div,水平对齐

html - 通过 Bootstrap CSS 自定义 CSS