2

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

与 Web Font Loader Font Face Observer 不同，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

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

4

1 回答 1

1

你在这里描述的：

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

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

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

于 2019-07-18T01:44:07.433 回答