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

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

2月前
204111

为什么要关注这一问题?

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

立即显示文本

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

选项 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月前

为你推荐

一次 Node.js http 连接无法复用的问题排查
一次压测中阿里云 SLB 的并发连接数被打满了,导致服务之间的 HTTP 调用延迟很大。当时 SLB 的并发连接数情况如下图所示。登录容器终端查看,发现某个前端 Node.js 服务中的单个容器的 E
webpack5优化实战
本文围绕webpack优化进行讲述,其中也会作某些原理性地解释,尽量做到让大家知道为什么这么做,以及这么做的结果是什么。
前端性能基础:健康网站的关键指标有哪些?
概览 #Web 指标是 Google 开创的一项新计划,旨在为网络质量信号提供统一指导,这些信号对于提供出色的网络用户体验至关重要。多年来,Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行,而另一些开发者则发现大量的工具和指标令人应接不暇。网站所有者要想了解他
减小 WebFont 大小
版式是良好设计、品牌塑造、可读性和可访问性的基础。WebFont 可实现上述全部功能以及更多功能:文本可选择、可搜索、可缩放且有利于实现高 DPI,无论屏幕大小和分辨率如何,都能提供一致且清晰的文本呈现。WebFont 对于良好的设计、UX 和性能至关重要。WebFont 优化是整体性能策略的关键
优化 WebFont 加载和呈现
包含所有样式变体(您可能不需要)以及所有字形(可能不使用)的“完整”WebFont,很容易导致数兆字节的下载。在本文中,您将了解如何优化 WebFonts 的加载,以便访问者只下载他们将使用的内容。为了解决包含所有变体的大文件的问题,@font-face CSS 规则专门设
在字体加载期间避免不可见的文本
为什么要关注这一问题?字体通常是需要一段时间才能加载完毕的大文件。为了解决这个问题,部分浏览器会在字体加载完毕前隐藏文本(“不可见文本的闪现”)。如果您在优化性能,可能会想避免“不可见文本闪现”,并使用系统字体立即向用户显示内容(“无风格