CSS font-display：网络字体渲染的未来

使用网络字体的缺点之一是，如果用户设备上没有可用字体，则必须下载该字体。这意味着在字体可用之前，浏览器必须决定如何处理使用该字体的任何文本块的显示。并且它需要以一种不会显着影响用户体验和感知性能的方式来实现这一点。 ackward Skip 10s Play Video Forward Skip 10s 随着时间的推移，浏览器采取了多种策略来缓解这个问题。但他们以不同的方式做到这一点，并且不受开发人员的控制，开发人员必须设计多种技术和解决方法来克服这些问题。 使用 Chrome DevTools 测试字体显示 输入at 规则的字体显示描述符。@font-face此 CSS 功能引入了一种标准化这些行为并为开发人员提供更多控制的方法。 使用font-display 在详细了解 提供的各种功能之前font-display，让我们简要考虑一下如何在 CSS 中使用该ont-display它不是 CSS 属性，但正如简介中提到的，它是at 规则的描述符。



意味着它必须在规则内使用，如以下代码所示： 在此代码片段中，我定义了swapfont 的值Saira Condensed。 所有可用值的关键字是： auto block swap fallback optional font-display的初始值为auto。 在后面的部分中，我将详细介绍每个值。但 WhatsApp 号码数据 首先，让我们看一下浏览器用来确定要渲染的字体的时间段。在讨论每个值时，我将解释时间线的不同方面以及它们对于每个值的行为方式。 时间轴font-display_ 此功能的核心是字体显示时间轴的概念。字体加载时间，从请求开始到加载成功或失败结束，可以分为三个连续的时间段，这三个时间段指示浏览器应如何呈现文本。这三个时期如下： 封锁期。在此期间，浏览器会使用不可见的后备字体呈现文本。如果成功加载请求的字体，则会使用该请求的字体重新呈现文本。不可见的后备字体充当文本的空白占位符。这减少了执行重新渲染时的布局移位。 交换期。





如果所需的字体尚不可用，则使用后备字体，但这次文本可见。同样，如果加载字体进来，就会使用它。 失败期。如果字体不可用，浏览器不会等待，文本将在当前页面访问期间使用后备字体显示。请注意，这并不一定意味着字体加载被中止；相反，浏览器可以决定继续使用，以便同一用户连续访问页面时可以使用该字体。 Learn to Code with JavaScript 通过调整此类时间段的持续时间，您可以配置自定义文本渲染策略。特别是，这些持续时间可以缩减到零或延长到无穷大，正如我将在以下部分中向您展示的那样。 但开发人员无法明确指定这些持续时间。这种可能性在规范的早期阶段就被检查过，但被放弃了。相反，如上一节所述，提供了一组可以处理大多数用例的预定义关键字值。 让我们看看每个关键字如何管理字体加载和显示过程。 font-display: auto 该值告诉浏览器采用浏览器选择的默认字体显示行为。