如何避免由 Web 字体引起的布局偏移

#前言
一些布局上的完全加载前后的变化很容易解决：为动态元素预先分配正确的空间，在图像上使用宽度和高度属性，并优先考虑 HTML 文档中的可见元素。但是，导致布局偏移的还有一个难以解决的问题：无样式文本 (FOUT) 的闪烁。

这篇文章我们将探索令人惊讶的复杂文本渲染世界，以及一些解决无样式文本闪烁的技术。

为什么字体会导致布局变化？

意外的布局变化（页面内容在没有用户交互的情况下移动）不利于用户体验。下载网络字体时，当字体题发生变化时，会导致包含元素（例如<div>，段落或段落）的大小发生变化，从而导致布局发生变化。当 Web 字体的字体高度或段落长度与系统字体相比不同时，就会出现这种情况。布局页面时，浏览器将使用后备字体的尺寸和属性来确定包含元素的大小，即使你已声明 Web 字体以阻止系统字体font-display: block！

两种不同的字体是可能会导致布局发生变化的，但不是一定，这主要取决于字体的字体高度。

如何避免

我们现阶段的网页为了满足用户的审美往往会使用一些特殊字体，但与此同时也会带来一些体验上的问题，最常见的就是页面的加载速度以及文本闪烁等。所以我们有必要对字体进行一些优化操作来满足我们“日益挑剔”的用户。

font-display

最粗暴的解决方案是只需要一行CSS代码就能够解决。

font-display: optional;

为什么说只需要这一行代码就能够解决呢，因为如果 Web 字体在呈现文本时不可用（加上 100 毫秒），它会告诉浏览器使用备用系统字体。这意味着在未缓存的页面加载时，可能会使用备用字体，但所有后续页面加载都应使用 Web 字体呈现，因为它将被下载并在缓存中可用。

它一共有以下几个属性：

• auto： 字体显示策略由用户代理
• block： 为字体提供一个短暂的阻塞周期和无限的交换周期，在等待网络字体时隐藏文本最多三秒钟，并在加载时始终交换网络字体
• swap： 为字体提供一个非常小的阻塞周期和无限的交换周期，尽快显示文本，并在加载时始终交换网络字体
• fallback： 为字体提供一个非常小的阻塞周期和短暂的交换周期，隐藏文本最多 100 毫秒，然后仅在三秒内加载时交换网络字体
• optional： 为字体提供一个非常小的阻塞周期&#