用户指南 取消(C)

字体事件

  1. Adobe Fonts 用户指南
  2. 简介
    1. 系统要求和订阅要求
    2. 浏览器和操作系统支持
    3. 在计算机上添加字体
    4. 向网站添加字体
    5. 在 CC 移动应用程序上添加字体
  3. 字体许可
    1. 字体许可
    2. 管理您的帐户
    3. 向 Creative Cloud 企业版客户授予许可
    4. 将字体许可证添加到您的帐户
    5. 从订阅库中删除字体
    6. Adobe Fonts 不适用于在中国注册的 Adobe ID
    7. 我的 Creative Cloud 订阅为何不包含这些字体?
    8. Morisawa 2021 年 9 月字体删除
  4. 获取和使用字体
    1. 在 Creative Cloud 应用程序中使用 Adobe Fonts
    2. 管理您的字体
    3. 在桌面应用程序中解析缺失字体
    4. 在 InDesign 中使用字体
    5. 字体和排版规则
    6. 在 HTML5 Canvas 文档中使用 Web 字体
    7. 在 InCopy 中使用字体
    8. 如何在 Adobe Muse 中使用字体
    9. 在 Muse 中使用 Web 字体
    10. 打包字体文件
    11. 故障排除指南:添加字体
    12. 添加的字体未显示在字体菜单上
    13. “无法添加一种或多种字体”或“已安装同名字体”
    14. 如果字体设计合作伙伴对我正在使用的字体进行了更新,会发生什么?
  5. Web 设计和开发
    1. 向网站添加字体
    2. 故障排除指南:向网站添加字体
    3. 在 HTML 电子邮件或新闻稿中使用 Web 字体
    4. 借助移动页面加速 (AMP) 使用 Web 字体
    5. CSS 选择器
    6. 使用字体显示设置自定义 Web 字体性能
    7. 嵌入代码
    8. 动态子集和 Web 字体服务
    9. 字体事件
    10. 为什么我的 Web 字体来自 use.typekit.net?
    11. 网站无法连接到 use.typekit.net
    12. 借助 CodePen 使用 Web 字体
    13. 浏览器和操作系统支持
    14. 在本地开发时使用 Web 字体
    15. 内容安全策略
    16. 打印 Web 字体
  6. 语言支持和 OpenType 功能
    1. 语言支持和子集
    2. 使用 OpenType 功能
    3. CSS 中的 OpenType 功能的语法
  7. 字体技术
    1. OpenType-SVG 颜色字体
    2. Ten Mincho:从版本 1.000 进行更新的要点

字体事件包括在 JavaScript 字体加载中,用于动态子集。字体事件使您可以根据字体是处于活动状态、仍处于加载状态还是由于某种原因而无法使用来自定义网页。

字体事件尚不支持在 CSS 字体加载中使用。如果您正在网站上使用默认或 @import CSS 嵌入代码,您可以包括另一个 JavaScript 库来自定义字体加载。

在 CSS 中使用字体事件

为了帮助您更好地控制在字体正在加载或非活动时页面如何显示,JavaScript 嵌入代码提供了一组在将字体加载到页面时触发的字体事件。

共有三个主要的字体事件,每个事件都有一个对应的类名(在括号中):

  1. 正在加载 (.wf-loading):Web 字体正在加载
  2. 可用 (.wf-active):Web 字体处于可用状态
  3. 不可用 (.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 方法,则可以使用字体事件在所有浏览器中模拟此方法。字体事件是添加到元素的三个类:

  1. .wf-loading:在加载字体时添加;
  2. .wf-active:加载至少一种字体时添加;
  3. .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;
}

 Adobe

更快、更轻松地获得帮助

新用户?

Adobe MAX 2024

Adobe MAX
创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX

创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX 2024

Adobe MAX
创意大会

10 月 14 日至 16 日迈阿密海滩及线上

Adobe MAX

创意大会

10 月 14 日至 16 日迈阿密海滩及线上