- Adobe Fonts 用户指南
- 简介
- 字体许可
- 获取和使用字体
- Web 设计和开发
- 语言支持和 OpenType 功能
- 字体技术
字体事件包括在 JavaScript 字体加载中，用于动态子集。字体事件使您可以根据字体是处于活动状态、仍处于加载状态还是由于某种原因而无法使用来自定义网页。
字体事件尚不支持在 CSS 字体加载中使用。如果您正在网站上使用默认或 @import CSS 嵌入代码，您可以包括另一个 JavaScript 库来自定义字体加载。
在 CSS 中使用字体事件
为了帮助您更好地控制在字体正在加载或非活动时页面如何显示，JavaScript 嵌入代码提供了一组在将字体加载到页面时触发的字体事件。
共有三个主要的字体事件，每个事件都有一个对应的类名（在括号中）：
- 正在加载 (.wf-loading)：Web 字体正在加载
- 可用 (.wf-active)：Web 字体处于可用状态
- 不可用 (.wf-inactive)：Web 字体处于不可用状态
在加载期间，与这些事件关联的 CSS 类会附加到 HTML 元素中。可以在样式表中使用它们来控制在字体加载时如何设置页面的样式。例如：
.wf-loading {
/* styles to use when web fonts are loading */
}
.wf-active {
/* styles to use when web fonts are active */
}
.wf-inactive {
/* styles to use when web fonts are inactive */
}
字体事件类的常见用法是为不支持 Web 字体或已关闭 Web 字体的浏览器控制无样式文本的闪烁 (FOUT) 以及定义后备字体和样式。因为浏览器、操作系统和用户首选项的某些组合会导致页面上的字体不可用，所以最好包括后备字体和样式。
JavaScript 字体事件
这些字体事件还可以通过 Typekit.load 方法用作 JavaScript 回调挂钩。您可以在调用 Typekit.load 时传递包含回调函数的对象，并且在加载过程中发生不同的字体事件时将调用这些回调函数。例如：
<script>
try {
Typekit.load({
loading: function() {
// JavaScript to execute when fonts start loading
},
active: function() {
// JavaScript to execute when fonts become active
},
inactive: function() {
// JavaScript to execute when fonts become inactive
}
})
} catch(e) {}
</script>
JavaScript 回调可用于在加载字体后添加诸如淡入之类的功能，或根据呈现的文本的尺寸对表现布局进行复杂的数学调整。
除了这些基本字体事件之外，还提供了针对个别字体变体的更细粒度字体事件。这些事件的类名是字体系列名称、字体变体描述和字体事件名称的组合。举个例子，将粗细为 400 的普通 Gesta 添加到项目中会产生诸如 wf-gesta-n4-loading 和 wf-gesta-n4-active 之类的字体事件类。在 JavaScript 端提供 fontloading、fontactive 和 fontinactive 回调，并且可为每个单独的变体传递字体系列和字体描述。
使用字体事件：管理无样式文本的闪烁 (FOUT)
每个浏览器都以自己的方式处理正在加载的 Web 字体。如果浏览器最初使用后备字体显示文本，然后在加载完成后切换到链接的字体，则可能会出现无样式文本的闪烁或 FOUT。
字体正在加载时，将 .wf-loading 类应用于 HTML 元素。加载字体后，该类更改为 .wf-active。因此，您可以将以下内容添加到样式表中：
.wf-loading h1 {
/* styles to use while fonts are loading */
}
.wf-active h1 {
/* styles to use after fonts have loaded */
}
然后，您可以调整样式以减少 FOUT；例如，通过确保闪烁的字体和加载的 Web 字体看起来大小相同来实现。或者，您可以隐藏文本，直到字体完全加载为止。例如：
<style>
.wf-loading h1 {
font-family: "droid-sans";
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>
<body>
<h1>This headline will be hidden until Droid Sans is completely loaded.</h1>
</body>
后备字体样式设置部分有更多使用字体事件设置 CSS 样式的示例。
使用字体事件：后备字体样式设置
字体作为资源加载到网页中，就像图像或视频一样。根据操作系统、Web 浏览器、已安装的扩展、用户首选项和连接速度的组合，Web 字体有时可能无法加载。在这些情况下，将改用 CSS 堆栈中的后备字体。
例如，您可以在使用紧缩 Web 字体时调整后备字体的大小，这样即使 Web 字体无法加载，您的布局仍可保持一致。方法如下：
.headline {
/* These fallback styles are used by default */
font-family: Arial, sans-serif;
font-size: 18px; /* Smaller size for non-condensed fallback font */
}
.wf-active .headline {
/* These styles are used when web fonts are active */
font-family: "proxima-nova-extra-condensed",Arial, sans-serif;
font-size: 24px; /* Larger size for condensed font */
}
使用字体事件：为动态项目模拟不可见文本的闪烁 (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 类处于活动状态时显示文本：
.wf-loading {
/* styles to use when web fonts are loading */
}
.wf-active {
/* styles to use when web fonts are active */
}
.wf-inactive {
/* styles to use when web fonts are inactive */
}
例如，如果 h1 和 p 元素正在使用 Web 字体，则在加载字体时使用此 CSS 隐藏它们。
.wf-loading h1, .wf-loading p {
visibility: hidden;
}
.wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p {
visibility: visible;
}
