字体事件包括在 JavaScript 字体加载中，用于动态子集。 字体事件使您可以根据字体是处于活动状态、仍处于加载状态还是由于某种原因而无法使用来自定义网页。
字体事件尚不支持在 CSS 字体加载中使用。 如果您正在网站上使用默认或 @import CSS 嵌入代码，您可以包括另一个 JavaScript 库来自定义字体加载。
在 CSS 中使用字体事件
为了帮助您更好地控制在字体正在加载或非活动时页面如何显示，JavaScript 嵌入代码提供了一组在将字体加载到页面时触发的字体事件。
共有三个主要的字体事件，每个事件都有一个对应的类名（在括号中）：
- 正在加载 (.wf-loading)：Web 字体正在加载
- 可用 (.wf-active)：Web 字体处于可用状态
- 不可用 (.wf-inactive)：Web 字体处于不可用状态
在加载期间，与这些事件关联的 CSS 类会附加到 HTML 元素中。 可以在样式表中使用它们来控制在字体加载时如何设置页面的样式。 例如：
字体事件类的常见用法是为不支持 Web 字体或已关闭 Web 字体的浏览器控制无样式文本的闪烁 (FOUT) 以及定义后备字体和样式。 因为浏览器、操作系统和用户首选项的某些组合会导致页面上的字体不可用，所以最好包括后备字体和样式。
JavaScript 字体事件
这些字体事件还可以通过 Typekit.load 方法用作 JavaScript 回调挂钩。 您可以在调用 Typekit.load 时传递包含回调函数的对象，并且在加载过程中发生不同的字体事件时将调用这些回调函数。 例如：
JavaScript 回调可用于在加载字体后添加诸如淡入之类的功能，或根据呈现的文本的尺寸对表现布局进行复杂的数学调整。
除了这些基本字体事件之外，还提供了针对个别字体变体的更细粒度字体事件。 这些事件的类名是字体系列名称、字体变体描述和字体事件名称的组合。 举个例子，将粗细为 400 的普通 Gesta 添加到项目中会产生诸如 wf-gesta-n4-loading 和 wf-gesta-n4-active 之类的字体事件类。 在 JavaScript 端提供 fontloading、fontactive 和 fontinactive 回调，并且可为每个单独的变体传递字体系列和字体描述。
使用字体事件：管理无样式文本的闪烁 (FOUT)
每个浏览器都以自己的方式处理正在加载的 Web 字体。 如果浏览器最初使用后备字体显示文本，然后在加载完成后切换到链接的字体，则可能会出现无样式文本的闪烁或 FOUT。
字体正在加载时，将 .wf-loading 类应用于 HTML 元素。 字体加载完成后，该类更改为 .wf-active. 因此，您可以将以下内容添加到样式表中：
然后，您可以调整样式以减少 FOUT；例如，通过确保闪烁的字体和加载的 Web 字体看起来大小相同来实现。 或者，您可以隐藏文本，直到字体完全加载为止。 例如：
后备字体样式设置部分有更多使用字体事件设置 CSS 样式的示例。
使用字体事件：后备字体样式设置
字体作为资源加载到网页中，就像图像或视频一样。 根据操作系统、Web 浏览器、已安装的扩展、用户首选项和连接速度的组合，Web 字体有时可能无法加载。 在这些情况下，将改用 CSS 堆栈中的后备字体。
例如，您可以在使用紧缩 Web 字体时调整后备字体的大小，这样即使 Web 字体无法加载，您的布局仍可保持一致。 方法如下：
使用字体事件：为动态项目模拟不可见文本的闪烁 (FOIT)
默认情况下，动态项目在呈现 Web 字体样式的文本时会出现无样式文本的闪烁 (FOUT)。 这意味着浏览器会在加载 Web 字体时呈现后备字体，然后在 Web 字体可用时切换到 Web 字体。 这与 Web 字体呈现的替代方法不同，在替代方法中，浏览器将在下载 Web 字体时隐藏文本，然后在加载 Web 字体后显示用 Web 字体样式化的文本。 这称为不可见文本的闪烁 (FOIT)。
FOUT 方法适合在更大程度上立即可用的页面，尤其是在网络连接速度较慢的情况下，但是如果您更喜欢 FOIT 方法，则可以使用字体事件在所有浏览器中模拟此方法。 字体事件是添加到元素的三个类：
- .wf-loading：在加载字体时添加；
- .wf-active：加载至少一种字体时添加；
- .wf-inactive：没有加载任何字体时添加。
您可以在 CSS 中使用这三个类来模拟 FOIT 加载，方法是在 wf-loading 类处于活动状态时隐藏文本，而在 wf-active 或 wf-inactive 类处于活动状态时显示文本：
例如，如果 h1 和 p 元素正在使用 Web 字体，则在加载字体时使用此 CSS 隐藏它们。
