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

Question

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

与 Web Font Loader Font Face Observer 不同，它使用滚动事件来 以最小的开销有效地检测字体加载。

在我看来，当您向下滚动时，它会检测是否正在使用字体，如果是，则加载它。另外，如果我没有指定权重，说 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

你在这里描述的：

我的理解是，这允许您仅在使用时加载字体。

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

Font Face Observer 非常适合当您想要在字体可用后执行其他操作时，例如。在canvas 上使用它，应用 CSS 类等。我认为 Font Face Observer 将需要使用该系列来检查它是否可用，这就是即使你没有在任何地方使用它们也会被加载的原因其他在您自己的 CSS 中。如果您在字体加载后不需要执行任何其他操作，那么浏览器默认行为可能会按原样为您工作。