WebFontLoader：为什么 vanilla font-family 声明不足以用于后备？答案

【问题标题】：WebFontLoader: Why is vanilla font-family declaration not sufficient for fallbacks?WebFontLoader：为什么 vanilla font-family 声明不足以用于后备？
【发布时间】：2017-02-09 12:31:19
【问题描述】：

我喜欢使用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 的重点不是这样，如果第一个不被识别，它会自动回退到其他的吗？

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

【问题讨论】：

这不是“font-family”的意思；字体系列是由一种或多种字体设计的一个或多个表达式组成的字体集合，例如“Droid Sans”是一个系列，具有单独的字体“Droid Sans Regular”、“Droid Sans Bold”、“Droid Sans UltraThin”等。这些都是不同的字体（即磁盘上的单个文件），但它们都是单一字体系列的一部分。在 CSS 中，您可以为 font-family 属性列出多个字体系列以使浏览器“通过”（就像您可以为单个 @font-face 的 src 属性指定多个值一样)

标签： css fonts webfonts webfont-loader

【解决方案1】：

为什么声明带有系统备份的普通字体堆栈还不够？

就足够了，如果您只想在字体全部可用时使用它们。但也许你想在确保你的字体可以使用的那一刻做更多的事情，在这种情况下，使用 CSS 类有助于做更强大的事情。因此，大多数示例将向您展示“更强大”的版本，而不是有限的用例：在 <html> 元素上使用类可以触发任何功能并重新设置您可能想要的样式当 webfonts 准备好时启动。

例如，您可以将其用作关闭对话框的开关，该对话框仅在您的网络字体尚未准备好时才可见。例如::

<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 类添加到 <html> 元素显式地为您的整个页面提供一个信号，该信号可用于“在我的所有网络字体都准备好使用时执行需要发生的事情”，这是 与“一旦准备好就使用字体”非常不同。

【讨论】：

谢谢。最重要的是，我想通过不使用 .wf-active 方法来验证我没有做严重错误的事情。非常感谢。