Font Face Observer 在页面加载时加载所有字体？

Question

也许我误解了 Font Face Observer 的工作原理。我的理解是，这允许您仅在使用时加载字体。但无论我在代码中放入什么字体，它总是会加载到浏览器中。下面的示例代码。如果加载所有字体，那不会使我的页面 "heavy" 吗？特别是如果我不使用所有字体？这部分描述让我很困惑：

Unlike the Web Font Loader Font Face Observer uses scroll events to detect font loads efficiently and with minimum overhead.

我觉得这听起来很像，当你向下滚动时，它会检测是否正在使用某种字体，如果是，则加载它。另外，如果我不指定字重，Roboto 的字体加载器是否会加载所有可用字重？

var fontA = new FontFaceObserver('Roboto');
var fontB = new FontFaceObserver('Roboto Condensed');
var fontC = new FontFaceObserver('Open Sans');
var fontD = new FontFaceObserver('Open Sans Condensed');
var fontE = new FontFaceObserver('Oswald');

fontA.load().then(function () {
  console.log('Roboto font is available');
});

fontB.load().then(function () {
  console.log('Roboto Condensed font is available');
});

fontC.load().then(function () {
    console.log('Open Sans font is available');
});

fontD.load().then(function () {
    console.log('Open Sans Condensed Font is available');
});

fontE.load().then(function () {
    console.log('Oswald font is available');
});

运行时我在控制台中看到：

Roboto font is available
Open Sans font is available
Roboto Condensed font is available
Open Sans Condensed Font is available
Oswald font is available

所以回顾一下，这个字体加载器的目的是加载我指定的所有字体吗？如果我只使用没有特定权重的字体名称，它会自动加载所有权重吗？或者我是否还需要为每种字体添加我想使用的每种粗细？

Answer 1

您在这里描述的内容：

My understanding was, this allows you to load fonts ONLY when used.

…实际上是 @font-face 的默认浏览器行为。如果您有 10 个 @font-face 声明，但在页面上只使用了一个对应的 font-family，则只会加载其中一个字体文件。

字体可用时，当您想做其他事情时，Font Face Observer 非常有用，例如。在 canvas 上使用它，应用 CSS class 等。我认为 Font Face Observer 将需要使用家族来检查它是否可用，所以这就是他们被即使您没有在自己的其他任何地方使用过它们，也会加载 CSS。如果您在加载字体后不需要做任何其他事情，也许浏览器的默认行为会为您工作 as-is。

Font Face Observer 在页面加载时加载所有字体？

Font Face Observer loading all fonts on page load?

fonts

font-face

webfont-loader