使用字体显示设置自定义 Web 字体性能

上次更新日期: 2023年7月11日

了解如何使用字体显示设置来修改 Web 字体性能。

字体显示设置允许您指定如何在 Web 浏览器中加载 Web 字体并将其应用到您的网站。 此处有五个字体显示选项:

字体显示值

行为

自动

允许浏览器以其默认方式加载字体。

阻止

在 Web 字体下载完成之前,隐藏网站上的文本。 使用此选项时,网站访客可能会看到闪现的不可见文本或 FOIT

交换

在 Web 字体下载完成之前,显示在 CSS 中设置的回退字体。 使用此选项,您的网站访问者可能会看到无样式文本的闪现或 FOUT。  

回退

在短时间内使用阻止行为,然后切换到交换行为并将回退字体应用于文本。如果 Web Fonts 在交换期结束时仍未加载,则将继续使用回退字体。 

可选

在短时间内使用阻止行为,然后将回退字体应用于文本。 该值使 Web 浏览器可以选择完全不下载 Web 字体,例如当网站访问者的网络连接速度较慢时。 

有关 font-display 及其支持的值的技术详情,请参阅 CSS 字体模块 4 级规范

注释

默认情况下,创建 Web 字体项目时将字体显示设置为自动

如需自定义字体显示设置,请按照以下步骤进行操作:

Web 项目页面,单击“编辑项目”

编辑项目
编辑项目

从侧边栏中选择以下任何字体显示值。默认情况下,Web 字体项目的 font-display 设置为 auto。  

font display settings

单击“保存更改”,在数分钟内将字体显示值应用于您的网站。

新的字体显示设置自动包含在您的网站中,作为现有嵌入代码的一部分。

更新现有 Web 项目

字体显示支持已添加至将于 2020 年 9 月加载的 Adobe Web 字体中。 2020 年 9 月之前创建的 Web 项目已更新为使用默认的 font-display: auto 行为。 

通过执行上述步骤,可以更改任何现有项目的字体显示设置。 保存更改后,新的字体显示设置将包含在您的网站中,作为现有嵌入代码的一部分。 您无需对网站本身进行任何更改。