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- 家庭的重点，如果第一个没有被识别，它会自动回归到其他人吗？

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

Answer 1

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

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

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

<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>元素明确地为您的整个页面提供了一个信号，可以用来做所有需要在我的所有webfonts都可以使用时发生的事情＆＃34;，非常不同只是＆＃34;一旦准备好就使用字体＆＃34;。

WebFontLoader：为什么vanilla font-family声明不足以进行回退？

1 个答案: