WebFontLoader：为什么香草字体系列声明不足以回退？

Question

我喜欢使用 WebFontLoader 加载字体。这是一个快速的解决方案，对我来说效果很好。我通常通过在我的页面 <head>:

中放置类似这样的内容来异步使用它

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async></script>

WebFontConfig = {
  google: {
    families: ['Droid Sans', 'Droid Serif']
  }
};

然后，在我的 CSS 中，我会做这样的事情：

h1 {
  font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
}

不过，我最近一直在阅读有关 WebFontLoader 的内容，而我看到的大多数示例（这里有一个 article 是关于它的）而是使用 WFL 应用的类做这样的事情到 <html> 元素以检测字体是否已加载并可以使用：

h1 {
  font-family: Helvetica, Arial, sans-serif;

  .wf-active & {
    font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
  }
}

我的问题是：为什么声明带有系统备份的普通字体堆栈还不够？ font-family的重点不是让第一个认不出来就自动回退到其他吗？

如果浏览器看到堆栈中的第一个字体不是系统字体，它是否会默认隐藏该元素，尽管有备份或类似的东西？

Answer 1

Why is declaring a normal font stack with system backups not enough?

足够了，如果您只想在字体可用时使用它们。但也许您希望在确定字体可以使用时做更多事情，在这种情况下，使用 CSS class 有助于做更强大的事情。因此，大多数示例将向您显示 "more power" 版本而不是有限的用例：在 <html> 元素上使用 class 可以触发 any 功能和重新样式化，您可能希望在网络字体准备就绪时启动。

例如，您可以将它用作开关来关闭一个对话框，该对话框只应在您的网络字体未准备就绪时可见。例如：：

<html>
  ...
  <div class="font-loading">Please wait while the fonts load.</div>
  ...
</html>

使用某种形式的 CSS

.font-loading {
  background: red;
  color: white;
  border: 1px solid black;
  opacity: 1;
  height: 4em;
  transition: opacity 1s ease-in, height 1s ease-in;
}

.wf-active .font-loading {
  opacity: 0;
  height: 0;
}

将 wf-active class 添加到 <html> 元素明确地为您的整个页面提供了一个可用于 "do things that need to happen when all my webfonts are ready for use" 的信号，这是 [=24] =]与 "using fonts once they are ready".

非常不同

WebFontLoader：为什么香草字体系列声明不足以回退？

WebFontLoader: Why is vanilla font-family declaration not sufficient for fallbacks?

css

fonts

webfonts

webfont-loader