CSS字体 - 播放：网络上字体渲染的未来
- Jennifer Aniston原创
- 2025-02-16 08:49:17432浏览
钥匙要点
- > CSS字体 - 播放描述符为开发人员提供了更多控制字体在加载时如何显示字体，旨在改善用户体验和感知的性能。 >描述符在 @font-face At-Lule中起作用，并提供五个可能的值：自动，块，交换，后备和可选。每个值都代表处理字体加载和渲染的不同策略。
- > >描述符在分为三个时期的时间轴上运行：块，交换和失败。这些时期的持续时间（无法由开发人员明确分配）决定了浏览器应如何渲染文本。
- >尽管在所有浏览器中尚未完全支持CSS字体 - 播放描述符，但它在网络上标准化字体渲染行为方面是向前迈出的重要一步。
- 使用Web字体的弊端之一是，如果在用户的设备上没有字体，则必须下载它。这意味着在字体可用之前，浏览器必须决定如何处理任何使用该字体的文本块的显示。它需要以一种不会显着影响用户体验和感知性能的方式做到这一点。
>输入 @font-face At-Lule的字体 - 显示描述符。此CSS功能引入了标准化这些行为并为开发人员提供更多控制的方法。
使用字体 - 播放
在详细查看字体 - 播放提供的各种功能之前，让我们简要考虑一下您如何在CSS中使用该功能。>
首先，字体 - 播放不是CSS属性，但是，如介绍中所述，它是 @font-face at rule的描述符。这意味着它必须在 @font-face规则中使用，如以下代码中所示：
在此片段中，我定义了字体saira的掉期值。
所有可用值的关键字为：
>自动
<span><span>@font-face</span> {
</span> <span>font-family: 'Saira Condensed';
</span> <span>src: <span>url(fonts/sairacondensed.woff2)</span> format('woff2');
</span> <span>font-display: swap;
</span><span>}</span>blockswap
后备
- >可选
- font-display的初始值是自动的。
- >
在后面的部分中，我将详细介绍每个值。但是首先，让我们看一下浏览器用来确定要渲染的字体的时间段。在讨论每个值时，我将解释时间表的不同方面以及这些值如何为每个值行为。
font-display时间轴
该功能的核心是字体播放时间轴的概念。从其请求开始，并以其成功的加载或失败结束，可以将字体加载时间分为三个连续的时期，以决定浏览器应如何呈现文本。这三个时期如下：- 块周期。在此期间，浏览器以
- 的 sholdback字体呈现文本。如果请求的字体成功加载，则文本将使用该请求的字体重新渲染。无形的后备字体充当文本的空白占位符。当执行重新渲染时，这会减少布局变化。 >
- 交换期。如果尚未可用的字体，则使用后式字体，但是这次文本可见。同样，如果加载字体进来，则使用它。
- 失败期。如果该字体不可用，则浏览器将不等待，并且文本将在当前页面访问期间以后备字体显示。请注意，这并不一定意味着字体加载已中止；相反，浏览器可以决定继续它，因此该字体可以在同一用户连续的页面访问中使用。
。
，但是这些持续时间不能由开发人员明确分配。在规范的早期阶段检查了这种可能性，但被删除。相反，如上一节中概述了一组可以处理大多数用例的预定义关键字值。>让我们看一下这些关键字中的每个关键字如何管理字体加载和显示过程。
> font-display：auto>
此值告诉浏览器采用浏览器选择的默认字体显示行为。通常，此策略类似于下一个值。> font-display：block
>在短时间内（规格建议持续三秒钟）后，掉期延伸到无穷大。这意味着在这种情况下，失败时期是不存在的。
>浏览器短暂等待所请求的字体时，它以隐形后式字体呈现文本；之后，如果字体尚未可用，则使后备字体可见；每当下载完成时，浏览器都会用想要的字体重新呈现文本。
>您可以在以下视频中观看此行为，该视频使用一个简单的测试页面，该页面包含特定的Web字体以进行标题：
>在页面负载的开头，标题是看不见的，但在DOM中存在。大约三秒钟后，如果字体尚未可用，则可以通过后备字体可见文本。在视频演示中，我使用Chrome DevTools的网络节流功能模仿糟糕的网络条件。最后，当字体设法下载时，标题会重新渲染。
>> font-display：swap
以这个值，块周期倒塌到0，交换周期延伸至无穷大。因此，在这里也缺少故障时期。
>>换句话说，浏览器不等待字体，而是立即用后备字体呈现文本。然后，只要字体可用，文本就会重新渲染。
>>让我们验证以下内容：
font-display：hallback
这是结合故障周期的第一个值。在较短的块周期（建议使用100毫秒）之后，交换期现在的持续时间很短（建议3s）。结果，如果在此期间结束时尚未准备好所请求的字体，则文本将在页面访问期间使用后备字体显示。这避免了可能会引起用户体验的后期布局偏移来打扰页面访问者。
在下面的第一个视频中，字体在超过六秒钟后加载，因此它从不交换：
> 在下一个视频中，在交换期间的超时之前，字体加载速度更快，因此该字体按预期使用：>
font-display：可选
>首次阅读规范时，我发现分配给字体显示策略的名称不太清楚。甚至在规范本身中指出了这一点，这表明规格的未来版本使用可以更好地说明每种策略的预期使用，并提出以下替代方案：
- 需要块
- 对于交换> 很重要
- >后备 最好
，但预计可选值将保持不变。实际上，这个价值很好地捕捉了它触发的行为的本质。在这种情况下，该字体被认为是对页面渲染的可选，从本质上讲，请告诉浏览器：如果字体已经可用，请使用它，请使用，否则没关系，请继续使用后式字体；该字体可以在未来的页面访问
上可以使用>具有此值，字体显示时间表的块周期很短（Spec建议使用100 ms的时间间隔）和零持续交换周期。因此，故障周期紧随块周期，这意味着，如果字体不随时可用，则不会在页面访问期间使用。但是该字体最终可以在后台完全下载，因此它可以在未来的页面加载上立即渲染。
>>但我应该在这里指出，尤其是在网络条件下，用户代理可以免费中止，甚至无法开始字体下载。这是为了不必不必要地影响网络连接的质量。因此，该站点仍然可用，但是该字体在将来的页面加载中不会立即可用。
>>在下面的视频中，测试页面已加载而无需限制网络。该字体会很快下载，但仅在短时间后才下载，因此在所有访问时间内显示带有后备字体的文本。
> 在下一个视频中，
>>
在同一网络条件下重新加载页面，但是这次启用了缓存，可以模拟第二次访问：> https://uploads.sitepoint.com/wp-content/uploads/2017/09/1508342073fontdisplay06.mp4
>您有，现在的标题现在使用所需的Web字体呈现。在继续前进之前，请注意使用后备和可选值时，建议在块周期中建议的非常短的持续时间。这是为了在使用后式字体之前允许短期内显示快速加载字体（或从缓存中加载的一个加载），从而避免使用“未风格的文本”或fout。>我实际上想知道为什么使用字体 - 播放：交换时，块周期倒数为零，而不是使用与可选的相同的短间隔。事实证明，规格的GitHub存储库中存在一个空旷的问题，可以使用与其他人相同的“小块周期”。
>关于后备字体
在上述讨论中，我几次提到了后备字体。但是它来自哪里？>
后备字体是使用所讨论元素上的字体家庭属性定义的字体堆栈中的第一个可用字体。> 例如，在测试页面上，标题的字体家庭值为：
> 可以验证这一点（例如，请参见上面的视频以获取可选的视频），例如在Windows计算机上，该机器将Arial用作渲染字体。
支持
<span><span>@font-face</span> { </span> <span>font-family: 'Saira Condensed'; </span> <span>src: <span>url(fonts/sairacondensed.woff2)</span> format('woff2'); </span> <span>font-display: swap; </span><span>}</span>在写作时对字体 - 播放描述符的支持时，如下所示：自60
版本以来，Chrome已支持它 自第47版以来，Opera已支持它
> Firefox正在开发，自第46版以来就在国旗后面可用。 关于Safari，WebKit平台状态报告它正在开发> >尚无迹象表明Microsoft Edge会很快支持它。 Microsoft Edge开发人员反馈网站上有一张票，可以在其中投票通过此功能的实现。
- 请参阅Caniuse.com以获取最新支持信息。 >值得注意的是，可以通过功能查询来测试字体 - 显示支持，因为如上所述，它不是CSS属性，而是字体描述符。在此GitHub问题中，您会发现有关如何正确检测此功能的一些讨论。
- > 一旦发现不支持字体 - 播放，就可以使用几种后备策略，但这是本文的范围。扎克·莱瑟曼（Zach Leatherman）的字体加载策略指南综合指南对可用解决方案进行了详尽的调查。 Google字体使用 >
- >您可能已经注意到，演示页面中使用的字体来自Google字体，但并未以通常的方式加载，即链接到Font Provider提供的样式表。取而代之的是，我只是复制了该样式表中的字体的URL，并在我的自定义 @font-face规则中使用了该URL。我必须这样做，因为如用法部分所示，必须在字体脸规则中指定字体 - 播放。 。
- >有更好，更多的Google字体友好方式吗？ Google字体和其他第三方字体铸造厂是否会支持字体显示？
在Google字体上讨论了这一点。添加您的1以显示您对此功能的兴趣！
>>另外，值得一提的是，CSS字体模块4级别提出了字体 - 播放作为 @font-feature-values的描述符，以使开发人员能够为 @font-face for @font-face for note @font-fact pacter设置不属于的显示策略直接在他们的控制之下。但这尚未由任何用户代理实施。
>>最终单词
>我希望这能为您提供对字体 - 播放描述符的不错的概述，以及此功能如何预示网络上的字体呈现的强大未来。
>>尽管本文没有讨论针对字体 - 播放实施的不同策略的特定用例，但规范说明了用例使用了一些明确的示例，以及一些引用的参考文献详细介绍了此主题。因此，除了我在这里介绍的基础知识外，您还需要查看我引用的资源。
经常询问有关CSS字体显示和Web字体渲染的问题（常见问题解答）> > CSS字体显示属性是什么，为什么很重要？
> CSS字体播放属性是CSS功能，它控制着网页上的字体如何显示字体，尤其是在字体上，尤其是在字体上仍在加载。该属性至关重要，因为它会显着影响网站上的用户体验。如果字体花费太长的加载，则可能会导致文本渲染的延迟，从而导致一种被称为无形文本闪光灯（FOIT）或未经风格的文本闪光灯（FOUT）的现象。通过使用字体 - 播放属性，开发人员可以控制此行为并改善整体用户体验。
如何工作？提供一组规则，以决定字体在加载时应如何表现以及何时无法加载。它接受了几个值，包括“自动”，“块”，“交换”，“后备”和“可选”。这些值中的每一个都代表了不同的加载策略，使开发人员可以灵活地选择最适合其需求的策略。
>>字体 - 播放值之间有什么区别？显示值代表不同的字体加载策略。 “自动”将加载行为留在浏览器上。 “块”给字体一个短时间和无限互换时期。 “交换”使字体具有零秒的块周期和无限互换期。 “后备”为字体提供了很短的块期和短交换期。 “可选”为字体提供了一个零秒的块周期和零秒交换时期。
>如何在我的代码中使用CSS字体 - 播放属性？
>在代码中使用CSS字体播放属性，您需要将其包含在 @font-face规则中。这是一个示例：
@font-face {
font-fomily：'myfont';
src：url（'myfont.woff2'）格式（'woff2'） -display：swap;
}
在此示例中，字体 - 播放属性设置为'swap'，这意味着如果没有“ myfont”，则文本将立即用后式字体显示。 >
CSS字体播放属性对网站性能有何影响？> CSS字体播放属性会极大地影响网站性能。通过控制加载过程中字体的显示方式，它可以帮助防止文本渲染的延迟，从而提高网站的感知加载速度。它还可以帮助避免由延迟加载字体引起的布局偏移，从而导致使用更顺畅的用户体验。
> CSS字体 - 播放属性如何影响隐形文本（FOIT）的闪光（FOIT）和未风格的文本（ fout）？
css font-display属性直接解决了FOIT和FOUT的问题。通过允许开发人员控制字体加载行为，它可以防止文本在加载过程中变得不可见或不变。例如，将字体放置属性设置为“交换”可以通过立即使用后备字体显示文本来消除FOIT。
使用CSS Font-Display属性有哪些最佳实践？ 🎜>使用CSS字体播放属性的一些最佳实践包括根据您的需求选择正确的值，并测试不同浏览器和网络条件上的加载行为。还建议使用与自定义字体的指标相匹配的后备字体，以最大程度地减少布局变化。
我可以使用在第三方服务上托管的Web字体的CSS字体播放属性？
是的，您可以使用在第三方服务上托管的Web字体的CSS字体播放属性。但是，重要的是要注意，并非所有服务都支持此功能。您应该检查文档或与服务提供商联系以获取更多信息。>
使用CSS Font-Display属性有任何限制或缺点吗？显示属性是在所有浏览器中都没有完全支持它。例如，Internet Explorer和其他旧版本的其他浏览器不支持此功能。此外，“可选”值可能会导致自定义字体在某些情况下完全跳过，这可能会影响您的网站的视觉一致性。> CSS字体显示属性如何符合全面的Web性能策略？
> CSS字体播放属性只是全面的Web性能策略中的一种工具。虽然它可以帮助提高感知的加载速度并防止布局变化，但应与其他性能优化技术一起使用，例如最大程度地减少CSS和JavaScript文件的大小，优化图像，并使用内容交付网络（CDN） 。
以上是CSS字体 - 播放：网络上字体渲染的未来的详细内容。更多信息请关注PHP中文网其他相关文章！