字体文件通常是比较大的文件,需要一段时间才能加载。为了解决这个问题,某些浏览器会隐藏文本,直到字体加载完成为止(“不可见文本”)。如果要优化性能,则要避免使用“看不见的文字闪烁”,并立即使用系统字体(“无样式文字”)向用户显示内容。
本文一共介绍两种方式,第一种方法非常简单,但不能获得所有浏览器的支持;第二种方法稍微麻烦一些,但兼容所有浏览器。
方法一、使用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
原文地址:https://www.zhanzhangb.com/1910.html