文章标签

我个人真的很不喜欢 FOUT。我喜欢它作为一个选项，因为在网络上不快速显示文本是不好的。我知道 font-display: swap; 因为它的性能很好而很受欢迎，但 FOUT 的内容让我很痛苦。 Matt …

今年的 Web 性能日历 已经重新开始。迄今为止的前两篇文章都是关于性能！首先，Rick Viscomi 撰写了关于 神话般的“快速”网页

你如何处理网页性能的测量

Google 在 I/O 大会上宣布，他们的字体服务现在将支持 font-display 属性，这将解决一些网络性能问题。如果你听到欢呼声，那可能是 Chris 在庆祝时击掌。 他一直想要…

来自 Divya 的设置

在使用网络字体时，可能会出现两种问题：闪烁的不可见文本 (FOIT) 和闪烁的未设置文本 (FOUT) …… 如果我们要比较它们，FOUT 是……

嘿！整篇文章都是关于 2019 年 5 月之前 Google Fonts 没有提供在不自行托管字体的情况下使用 font-display 的方法。

要使用 Google Fonts 中的 font-display，你需要在……中包含一个 URL 参数，例如 &display=swap。

你们都了解 font-display 吗？它非常棒。这是一个 CSS 属性，你可以在 @font-face 块中使用它来控制该字体在视觉上的加载方式。字体加载确实非常复杂。 来自 Zach Leatherman 的指南 来……

Senthil Padmanabhan 记录了如何

1. FOUT 和 FOIT 都是不可取的。
2. 最好的解决方案是 font-display。
3. 由于 font-display 的支持度不是很好，实现它的途径非常复杂。
4. 他们 开源了它。

他们使用复制……

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

@font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  

2017 年 1 月 12 日更新： 现在文章主体部分包含了正确的支持检查。添加了关于 block 值的信息。对细微的调整和复制编辑。尽情享受！

如果你经常阅读 CSS-Tricks，你很可能知道……