避免字体加载过程中出现不可见的文本

字体文件通常是比较大的文件,需要一段时间才能加载。为了解决这个问题,某些浏览器会隐藏文本,直到字体加载完成为止(“不可见文本”)。如果要优化性能,则要避免使用“看不见的文字闪烁”,并立即使用系统字体(“无样式文字”)向用户显示内容。

本文一共介绍两种方式,第一种方法非常简单,但不能获得所有浏览器的支持;第二种方法稍微麻烦一些,但兼容所有浏览器。

方法一、使用font-display

示例:

@font-face { font-family: Helvetica; }

将以上改成:

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

font-display是用于指定字体显示策略的API。swap告诉浏览器使用此字体的文本应立即使用系统字体显示。自定义字体加载好后,再将系统字体替换掉。

如果浏览器不支持font-display,则浏览器将继续遵循其默认行为来加载字体。

以下为主流浏览器对font-display的支持情况:

Edge使用系统字体,直到字体准备就绪再换掉字体。
Chrome隐藏文字最多3秒, 如果文本仍未准备好,使用系统字体,直到自定义字体准备好后,再换掉字体。
Firefox与Chrome相同。
Safari隐藏文本,直到自定义字体准备就绪。

方法二、使用FontFaceObserver

只需多做一些工作,就可以在所有浏览器上均实现正常工作。

此方法包括三个部分:

  • 请勿在初始页面加载时使用自定义字体。这样可以确保浏览器立即使用系统字体显示文本。
  • 自动检测何时加载自定义字体。可以通过FontFaceObserver库来完成,仅需几行JavaScript代码即可。
  • 更新页面样式以使用自定义字体。

FontFaceObserver的使用方法,请详见:https://github.com/bramstein/fontfaceobserver


留下评论