当前位置:首页>WordPress教程>避免字体加载过程中出现不可见的文本

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

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

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

方法一、使用font-display

示例:

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

将以上改成:

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

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

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

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

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

方法二、使用FontFaceObserver库

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

此方法包括三个部分:

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

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

原文地址:https://www.zhanzhangb.com/1910.html

WordPress教程

JavaScript的defer与async属性应用详解

2024-1-24 3:17:00

WordPress教程

MySQL数据库的修复方法

2024-1-24 3:17:05

个人中心
今日签到
有新私信 私信列表
搜索