如何实现仅在指定font-family加载完成后才显示对应文本？

当然可以做到！咱们可以通过CSS初始隐藏文本 + JavaScript监听字体加载状态的组合方案来实现这个需求——目标字体没加载好时文本完全隐藏，加载完成后再让它显示出来。下面是具体的实现代码：

CSS 代码 #

@font-face { 
  font-family: Moonogram; 
  src: local(Moonogram), url('fonts/Moonogram.ttf') format("truetype"); 
}
.specialtext{ 
  font-family: 'Moonogram'; 
  font-size: 24px; 
  font-weight: 100;
  visibility: hidden; /* 初始状态隐藏文本，保留布局位置 */
}
.specialtext.visible {
  visibility: visible; /* 字体加载完成后切换为可见 */
}

这里用visibility: hidden而不是display: none，是为了保留文本原本的布局空间，避免字体加载完成后页面布局突然跳动。

HTML 代码 #

<p class="specialtext">This text</p>

和你原来的HTML结构一致，只是我们通过CSS初始隐藏了目标文本。

JavaScript 代码 #

// 精准检测Moonogram字体是否加载完成（匹配字体的字重、字号和测试文本）
document.fonts.load('100 24px Moonogram', 'This text')
  .then(() => {
    // 字体加载成功，给文本添加visible类使其显示
    document.querySelector('.specialtext').classList.add('visible');
  })
  .catch((error) => {
    // 可选：处理字体加载失败的情况
    console.error('Moonogram字体加载失败:', error);
    // 如果希望加载失败时也显示文本（用 fallback 字体），可以取消下面的注释
    // document.querySelector('.specialtext').classList.add('visible');
  });

这里用到了浏览器原生的document.fonts API，它能精准检测指定字体是否加载完成。load()方法接收两个参数：第一个是字体的样式声明（要和你CSS里的.specialtext匹配），第二个是测试用的文本（确保字体包含这些字符的渲染数据）。

补充说明 #

• 如果需要兼容不支持document.fonts的旧浏览器（比如IE），可以考虑使用字体加载检测的第三方库，选择可靠的实现即可。
• 如果你想同时监听多个字体，或者更精细地控制加载状态，可以结合FontFace API手动创建和加载字体文件。

内容的提问来源于stack exchange，提问作者eriandev