预加载如何显着减少 Web 渲染中的字体加载延迟？

有效缓解网页渲染中的字体加载延迟

通过@font-face嵌入自定义字体是网页设计中的常见做法，但它可能会引入闪烁效果，其中文本最初以默认系统字体呈现，然后在完成后切换到自定义字体。这种不希望的延迟是由字体文件的异步加载引起的。

通过“预加载”抢占字体加载

为了最大限度地减少这种延迟，行业标准解决方案是利用由现代浏览器。该属性使浏览器能够在渲染页面内容之前优先加载字体文件。

通过合并预加载，您可以指示浏览器异步启动指定字体文件的加载，从而为渲染做好准备一旦页面请求渲染文本就使用。结果是无缝过渡，应用自定义字体时没有任何可察觉的延迟。

例如，请考虑以下代码片段：

<link
  rel="preload"
  href="assets/fonts/xxx.woff"
  as="font"
  type="font/woff"
  crossorigin
/>

掌握的其他资源

要进一步了解该主题，我们建议探索以下资源：

• [我可以使用： link-rel-preload](https://caniuse.com/#feat=link-rel-preload)
• [rel=preload 的文档 - MDN](https://developer.mozilla.org/ en-US/docs/Glossary/Prefetch_and_preload)
• [Web 字体的预加载提示 - Bram斯坦](https://bramstein.com/blog/2013/01/14/preload-hint-web-fonts/)

以上是预加载如何显着减少 Web 渲染中的字体加载延迟？的详细内容。更多信息请关注PHP中文网其他相关文章！