我喜欢使用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;
}
}
我的问题是：为什么声明带有系统备份的普通字体堆栈是不够的？字体家族的重点不是如果第一个不被识别，它会自动回退到其他字体系列吗？
如果浏览器看到堆栈中的第一个字体不是系统字体，它会默认隐藏该元素吗，尽管有备份 - 或类似的东西？
为什么声明带有系统备份的普通字体堆栈是不够的？
这已经足够了，如果你只想在字体全部可用时使用它们。但是，也许您想在保证字体可以使用的那一刻做更多的事情，在这种情况下，使用 CSS 类有助于做更强大的事情。因此，大多数示例将向您展示"更强大"的版本，而不是有限的用例：在<html>元素上使用类可以触发任何功能，并在 Web 字体准备就绪时启用这些功能和重新设计样式。
例如，您可以将其用作开关来关闭仅在您的 Web 字体未准备好时才可见的对话框。 例如：：
<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>元素中显式地为您的整个页面提供一个信号，该信号可用于"当我的所有 Web 字体都准备好使用时执行需要发生的事情"，这与"一旦准备好就使用字体"非常不同。