font-display

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

font-display 属性定义了浏览器如何加载和显示字体文件。 它应用于 @font-face 规则,该规则在样式表中定义自定义字体。

@font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
  font-display: fallback; /* Define how the browser behaves during download */
}

font-display 属性接受五个值

  • auto (默认):允许浏览器使用其默认加载方法,这通常类似于 block 值。
  • block:指示浏览器在字体完全下载之前短暂隐藏文本。 更准确地说,浏览器使用不可见的占位符绘制文本,并在加载后立即将其替换为自定义字体。 这也被称为“不可见文本闪烁”或 FOIT。
  • swap:指示浏览器在自定义字体完全下载之前使用备用字体显示文本。 这也被称为“未设置文本闪烁”或 FOUT。
  • fallback:充当 autoswap 值之间的折衷方案。 浏览器将隐藏文本约 100 毫秒,如果字体尚未下载,将使用备用文本。 它将在下载后切换到新字体,但仅在短暂的切换期间(可能 3 秒)。
  • optional:与 fallback 一样,此值告诉浏览器最初隐藏文本,然后过渡到备用字体,直到自定义字体可用为止。 但是,此值还允许浏览器根据用户连接速度来确定是否使用自定义字体,速度较慢的连接不太可能收到自定义字体。

以下是另一种理解它们的方式

 阻止周期交换周期
block无限
swap无限
fallback极短
optional极短

为什么我们需要 font-display

在我们广泛支持 @font-face 之前,我们的排版武器库仅限于本地字体,其中唯一可用的字体是预加载在最终用户计算机上的字体。 我们称之为“网络安全”字体,因为浏览器不需要下载任何东西就可以呈现它们。

然后出现了 @font-face 规则,它为网页设计师和前端开发人员提供了前所未有的新的排版能力。 它允许我们将字体文件上传到服务器,并在样式表中编写一组规则来命名字体并告诉浏览器在哪里下载文件。 它还催生了诸如 Google Fonts 之类的服务,这些服务将自定义字体带给了大众。 最后,将网页设计与印刷设计分隔开来的一个主要障碍被推翻了!

但是,自定义字体是有代价的(并且仍在继续)。 字体文件可能很大,下载这些文件的额外时间会减慢网站的性能,尤其是对于网络连接较慢的设备。 用户在有限的数据计划上的额外费用也成为了一个因素。

自定义字体带来的另一个特殊问题是所谓的“未设置文本闪烁”或简称 FOUT。 浏览器在等待自定义字体下载时默认显示系统字体。 这使得网页加载速度更快,但引起了网页设计师的担忧,他们认为这会劫持用户体验,并歪曲了预期设计。 如今的 Web 浏览器通常会在自定义字体下载之前隐藏文本,我们现在将其称为“不可见文本闪烁”或 FOIT。

FOUT 和 FOIT 都不理想。 我们有 方法来优化 自定义字体的性能,以帮助缓解这些影响。 但是,现在我们有了 font-display 来告诉浏览器我们是否更喜欢 FOUT、FOIT 或介于两者之间。

测试支持

Šime Vidas 指出的一个有趣的注意事项

CSS font-display 是一个 @font-face 描述符,而不是一个属性,因此无法使用特征查询(CSS @supports 规则和 CSS.supports API)测试其在浏览器中的支持情况。

更多信息

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
6058不支持7911.1

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712711.3-11.4