前言
在某些布局上完全加载之前和之后的更改很容易解决：预先为动态元素分配正确的空间，在图像上使用宽度和高度属性，并优先考虑HTML文档中的可见元素。然而，还有一个问题很难解决：无样式文本（FOUT）的闪烁。
在本文中，我们将探索复杂文本渲染的惊人世界，以及解决无样式文本闪烁的一些技术。
为什么字体会导致布局变化？
意外的布局更改（页面内容在没有用户交互的情况下移动）不利于用户体验。下载网络字体时，当字体标题发生变化时，包含元素（如＜div＞、段落或段落）的大小将发生变化，从而导致布局发生变化。当Web字体的字体高度或段落长度与系统字体不同时，会发生这种情况。当您布局页面时，浏览器将使用备份字体的大小和属性来确定包含元素的大小，即使您声明了Web字体以阻止系统字体显示：block！
两种不同的字体可能会更改布局，但不一定，具体取决于字体高度。
如何避免
为了满足用户的审美需求，我们当前的网页经常使用一些特殊的字体，但同时也带来了一些体验问题。最常见的是页面加载速度和文本闪烁。因此，我们有必要优化字体，以满足我们“日益挑剔”的用户。
font-display
最粗暴的解决方案是只需要一行CSS代码就能够解决。
font-display:optional;
为什么我们只需要这行代码就可以解决这个问题？因为如果呈现文本时Web字体不可用（加上毫秒），它会告诉浏览器使用备用系统字体。这意味着当加载未缓存的页面时，可以使用备用字体，但所有后续页面加载都应该使用Web字体，因为它将被下载并在缓存中可用。
它具有以下属性：
自动：字体显示策略由用户委派
块：提供短的块周期和无限的字体交换周期。在等待网络字体时隐藏文本长达三秒钟，并在加载时始终交换网络字体
交换：提供非常小的阻塞周期和无限的字体交换周期，尽快显示文本，并在加载时始终交换网络字体
回退：为字体提供很小的阻塞周期和很短的交换周期。隐藏文本长达毫秒，然后仅在3秒内加载时交换网络字体
可选：为字体提供非常小的阻塞周期，并且没有交换周期。隐藏文本长达毫秒，然后仅使用可用的网络字体，从不交换
如果你不明白上面的解释，你可以看看下面的图片：
Optional是唯一保证不发生布局偏移的字体显示值
不幸的是，系统字体不一定是最好的设计，而且它们在操作系统之间并不一致。大多数设计师一想到要向用户展示另一种系统字体就畏缩不前。接下来，将引入各种优化，以更快地将字体文件传输到浏览器。允许使用任何字体显示选项，但显示系统字体的风险最小，或者用于可选选项以外的选项：不触发布局转换。
优化字体文件
优化网络字体有两种关键方法：子集和格式。
子集字体
许多字体都有来自多个字母的字形（字形是单个字符，如a或）。如果只提供拉丁字母（a-Z）而不使用连字（如é），这些字形表示字体文件中浪费的字节。
从该字体中删除非拉丁字符将生成一个大小为六分之一的woff2文件。
字体格式
所有主流设备基本上都支持woff2字体格式，因此无需引入不同格式的多种字体。通常，建议只引入woff2，这不仅可以保持代码简洁，还可以减少上传到服务器的文件数量。
加载更少的字体
尽管我们会将字体转换为woff2格式，但文件大小仍然是几百K，有时甚至是几M，字体文件大小也会影响页面的整体渲染速度。有时我们只需要几个字就可以使用特殊字体，所以我们不需要介绍整个字体文件。
提取字体
当我们遇到上述情况时，一定不要引入整个字体包，这会极大地浪费网络带宽，影响页面加载。建议使用字体蜘蛛提取文本。
安装font-spider
npminstallfont-spider-g
提取
我们还是以上面那段诗句为例，那里我们用的是汉仪旗黑.woff2字体文件。这里还是经过缩小文字库之后的大概是32K
我们再在项目目录下执行以下命令
font-spiderindex.html
这时会生成一个.font-spider目录，并将提取后的字体文件放在该目录下。现在的字体文件大概就只有10K，比之前的体积小了好几倍。
使用系统字体
Web字体很受欢迎，因为它们允许设计师在浏览器中保持一致的外观。如果不是，系统字体将是呈现文本的最快方式。如果当前的Web字体接近系统字体，您可以使用Monica的字体样式匹配器来调整字体设置，直到获得近乎完美的匹配。
使用系统字体意味着文本将尽早呈现。我们现在也有了一种将字体与操作系统匹配的方法，这可能比以前的Arial和Helvetica更具吸引力。
快速交付字体文件
显然，为了确保字体快速、正确地应用于我们的网页，我们必须让浏览器尽快下载我们的字体文件。在我们自己的CDN上托管字体将实现最佳性能。
使用CDN托管
通常，我们应该在服务器中提供字体，以避免连接到第三方服务器的成本，这对于高延迟连接尤为重要。使用第三方服务意味着您的字体将被延迟。最好的情况是直接从另一个主机名（例如，fonts.gstatic.
联系电话：