0

我喜欢使用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 的内容，而我看到的大多数示例（这里有一篇关于它的文章）都做了类似的事情，使用 WFL 应用于<html>元素的类来检测字体是否已加载并准备好利用：

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

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

我的问题是：为什么声明带有系统备份的普通字体堆栈还不够？font- family的重点不是如果第一个不被识别，它会自动回退到其他的吗？

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

4

1 回答 1

0

为什么用系统备份声明一个正常的字体堆栈是不够的？

如果您只想在字体全部可用时使用它们，这就足够了。但也许你想在确保你的字体可以使用的那一刻做更多的事情，在这种情况下，使用 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>元素中会为您的整个页面提供一个信号，该信号可用于“在我的所有 webfonts 都准备好使用时执行需要发生的事情”，这与“一旦准备好就使用字体”非常不同”。

于 2017-02-09T04:24:06.247 回答