性能文章>在字体加载期间避免不可见的文本>

在字体加载期间避免不可见的文本转载

6月前
225611

为什么要关注这一问题?

字体通常是需要一段时间才能加载完毕的大文件。为了解决这个问题,部分浏览器会在字体加载完毕前隐藏文本(“不可见文本的闪现”)。如果您在优化性能,可能会想避免“不可见文本闪现”,并使用系统字体立即向用户显示内容(“无风格文本的闪现”)。

立即显示文本

本指南概述了实现此目的的两种方法:第一种方法非常简单,但没有通用浏览器支持;第二种方法需要更多的工作,但具有完整的浏览器支持。对您来说,最好的选择是您将实际实施和维护的那个方法。

选项 1:使用 font-display

之前 之后
@font-face { font-family: Helvetica; } @font-face { font-family: Helvetica; font-display: swap; }

font-display是用于指定字体显示策略的 API。swap告诉浏览器使用该字体的文本应立即使用系统字体进行显示。自定义字体准备就绪后,系统字体就会被换掉。

如果浏览器不支持font-display ,那么它将继续遵循其加载字体的默认行为。点击这里查看有哪些浏览器支持font-display

这些是常见浏览器的默认 font-loading 行为:

浏览器 如果字体未准备好,则默认行为是...
Edge 在字体准备好之前使用系统字体。替换字体。
Chrome 隐藏文本,最多 3 秒。如果文本还没有准备好,使用系统字体直到字体准备好。替换字体。
火狐 隐藏文本,最多 3 秒。如果文本还没有准备好,使用系统字体直到字体准备好。替换字体。
Safari 隐藏文本直到字体准备好。

选项 2:在自定义字体被加载完毕前,一直等待

只需要多做一些工作,就可以在所有浏览器上实现相同的行为。

这种方法分为三个部分:

  • 不要在刚开始加载页面时使用自定义字体。这样可确保浏览器立即使用系统字体显示文本。
  • 检测何时会加载自定义字体。有了FontFaceObserver库,通过几行 JavaScript 代码就可以实现该功能。
  • 更新页面样式来使用自定义字体。

为了实现该功能,您需要进行以下更改:

  • 重构 CSS,从而在刚开始加载页面时不使用自定义字体。
  • 将脚本添加到页面。该脚本会检测自定义字体何时加载,然后更新页面样式。

验证

运行 Lighthouse 以验证站点是否使用font-display: swap来显示文本:

  1. 按下 `Control+Shift+J` (Mac上是 `Command+Option+J`) 组合键打开 DevTools.
  2. 点击 Lighthouse tab.
  3. 确保 Performance 选项被选中.
  4. 点击 Generate report 按钮.

确认确保在 webfont 加载期间文本保持可见审计通过。

点赞收藏
分类:标签:
风之石
请先登录,查看1条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

【全网首发】抛砖系列之前端性能分析工具

【全网首发】抛砖系列之前端性能分析工具

从零开始搞监控系统(1)——SDK

从零开始搞监控系统(1)——SDK

从零开始搞监控系统(2)——存储和分析

从零开始搞监控系统(2)——存储和分析

从零开始搞监控系统(3)——性能监控

从零开始搞监控系统(3)——性能监控

Sentry 错误监控实战

Sentry 错误监控实战

前端构建效率优化之路

前端构建效率优化之路

1
1