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

Question

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

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 类等。我认为 Font Face Observer 需要使用该系列来检查它是否可用，所以这就是为什么它们被加载，即使你没有没有在您自己的 CSS 中的其他任何地方使用它们。如果您在字体加载后不需要执行任何其他操作，也许浏览器的默认行为将按原样为您工作。