用户指南 取消(C)

字体事件

字体事件包括在 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 */
}
.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 */ }
.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>
<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>
<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 */
}
.wf-loading h1 { /* styles to use while fonts are loading */ } .wf-active h1 { /* styles to use after fonts have loaded */ }
.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>
<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>
<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 */
}
.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 */ }
.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 */
}
.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 */ }
.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;
}
.wf-loading h1, .wf-loading p { visibility: hidden; } .wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p { visibility: visible; }
.wf-loading h1, .wf-loading p {
visibility: hidden;
}

.wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p {
visibility: visible;
}

更快、更轻松地获得帮助

新用户?