Google Fonts 正在添加 font-display

Google 在 I/O 大会上宣布，其字体服务现在将支持 font-display 属性，该属性解决了多个 Web 性能问题。如果您听到欢呼声，那可能是 Chris 在庆祝时挥舞着拳头。 他一直想要这个功能，并建议 所有 @font-face 块都应该考虑使用该属性.

Zach Leatherman 详细说明了

这是一个重大消息——这意味着开发人员现在可以更好地控制 Google Fonts 网络字体加载行为。我们可以强制立即渲染回退文本（当使用 font-display: swap 时），而不是依赖浏览器默认的行为，即在 Web 字体请求处于飞行状态时，文本不可见长达 3 秒。

这也算是一种开拓。据我所知，这是第一个为这个非常重要的 font-display 功能提供支持的网络字体托管服务。

是的，这确实是一件大事！您可能还记得，font-display 指示浏览器如何（以及何时）加载字体。这使得它成为一种可能武器来 解决 FOUT 和 FOIT 问题。Chris 提到了 他喜欢 optional 值，原因正是如此。

@font-face {
  font-family: "Open Sans Regular";
  src: url("...");
  font-display: optional;
}

哦，现在是提醒大家 Monica Dinculescu 的 font-display 演示 的好时机，她在演示中探索了所有不同的 font-display 值及其在实际应用中的工作方式。这非常棒，值得一看。

直接链接 →