避免闪烁看不见的文字

Katie Hempenius
Katie Hempenius
X

本代码实验将向您展示如何使用 Font Face Observer 立即显示文本。

添加字体观察器

Font Face Observer 是一个脚本，用于检测字体何时加载。fontfaceobserver.js 文件已保存到项目目录中，因此您无需单独添加该文件。不过，您需要为其添加脚本标记。

  • 点击 Remix to Edit 即可修改项目。
  • 将 fontfaceobserver.js 的脚本标记添加到 index.html：
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

使用字体观察器

创建观察器

为页面上使用的每个字体系列创建一个观察器。

  • 在 fontfaceobserver.js 脚本后面添加以下脚本。这会为“Pacifico”和“Roboto”字体系列创建观察器：
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

如果您不确定需要创建哪些字体观察器，只需在 CSS 中查找 font-family 声明即可。将这些声明的 font-family 名称传递给 FontFaceObserver()。无需为后备字体创建字体观察器。

例如，如果您的 CSS 是：

font-family: "Times New Roman", Times, serif;

您需要添加 FontFaceObserver('Times New Roman')。Times 和 serif 是后备字体，因此您无需为它们声明 FontFaceObserver。

检测字体加载

用于检测字体加载的代码如下所示：

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() 是一个 promise，会在字体加载时解析。

演示网站使用了两种不同的字体，因此您需要使用 Promise.all() 等待两种字体都加载完毕。

  • 将以下 promise 添加到脚本中，紧挨您刚刚声明的 FontFaceObservers 下方：
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️签到

现在，您的脚本应如下所示：

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

应用 fonts-loaded 类

  • 将脚本中的 /* Do things */ 注释替换为以下代码行：
document.documentElement.classList.add("fonts-loaded");

这会在两个字体都加载完毕后，将 fonts-loaded 类添加到文档的根元素（<html> 标记）中。

✔️签到

完成后的脚本应如下所示：

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

更新 CSS

您应将页面的样式设置为在应用 fonts-loaded 类后使用自定义字体，在应用之前使用系统字体。

  • 更新 CSS：
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

验证

  • 如需预览网站，请按 View App（查看应用）。然后按 Fullscreen（全屏）全屏。

如果页面看起来像这样，则表示您已成功实现 Font Face Observer，并消除了“不可见文本闪烁”问题。

采用手写体字体的标题。