字体显示值
了解如何使用字体显示设置来修改 Web 字体性能。
字体显示设置允许您指定如何在 Web 浏览器中加载 Web 字体并将其应用到您的网站。 此处有五个字体显示选项:
|
|
行为 |
|---|---|
|
自动 |
允许浏览器以其默认方式加载字体。 |
|
阻止 |
在 Web 字体下载完成之前,隐藏网站上的文本。 使用此选项时,网站访客可能会看到闪现的不可见文本或 FOIT。 |
|
交换 |
在 Web 字体下载完成之前,显示在 CSS 中设置的回退字体。 使用此选项,您的网站访问者可能会看到无样式文本的闪现或 FOUT。 |
|
回退 |
在短时间内使用阻止行为,然后切换到交换行为并将回退字体应用于文本。如果 Web Fonts 在交换期结束时仍未加载,则将继续使用回退字体。 |
|
可选 |
在短时间内使用阻止行为,然后将回退字体应用于文本。 该值使 Web 浏览器可以选择完全不下载 Web 字体,例如当网站访问者的网络连接速度较慢时。 |
有关 font-display 及其支持的值的技术详情,请参阅 CSS 字体模块 4 级规范。
默认情况下,创建 Web 字体项目时将字体显示设置为自动。
如需自定义字体显示设置,请按照以下步骤进行操作:
在 Web 项目页面,单击“编辑项目”。
从侧边栏中选择以下任何字体显示值。默认情况下,Web 字体项目的 font-display 设置为 auto。
单击“保存更改”,在数分钟内将字体显示值应用于您的网站。
新的字体显示设置自动包含在您的网站中,作为现有嵌入代码的一部分。
更新现有 Web 项目
字体显示支持已添加至将于 2020 年 9 月加载的 Adobe Web 字体中。 2020 年 9 月之前创建的 Web 项目已更新为使用默认的 font-display: auto 行为。
通过执行上述步骤,可以更改任何现有项目的字体显示设置。 保存更改后,新的字体显示设置将包含在您的网站中,作为现有嵌入代码的一部分。 您无需对网站本身进行任何更改。