时间戳

首页 > 解决方案 > 您是否需要在中预加载字体并在 CSS 中将它们声明为字体？

css - 您是否需要在中预加载字体并在 CSS 中将它们声明为字体？

问题描述

我的问题来自尝试优化灯塔测试的预加载关键资产。

我已将 Chrome 浏览器中由灯塔报告标记的字体放入我的头文件中的链接中。

[头文件.php]

<link rel=”preload” href=”/wp-content/themes/mytheme/assets/font/Roboto/Roboto-Regular.ttf” as=”font” crossorigin=”anonymous”&gt;

我还需要将它包含在我的 style.css 文件中并声明字体吗？

[样式.css]

@font-face {
  font-family: "Roboto";
  src: url("/wp-content/themes/mytheme/assets/font/Roboto/Roboto-Regular.ttf") format("truetype"); }

我问是因为尽管在我的标题中添加了预加载链接，但 Lighthouse 报告仍然显示我的文件没有预加载。

谢谢大家的帮助。

标签： csswordpressfont-facepreloadlighthouse

解决方案

两个声明的目标不同。

元素的 rel 属性的 preload 值允许您在 HTML 中声明获取请求，指定页面很快需要的资源，您希望在页面生命周期的早期开始加载，在浏览器的主要渲染机制启动之前。

如果您自己添加预加载，则不会考虑您的字体。您还必须指定操作。

<link rel="preload" href="style.css" as="style"> <!--preload-->
<link rel="stylesheet" href="style.css"> <!--action-->

在这里，我们预加载了 CSS 和 JavaScript 文件，以便稍后在页面渲染需要它们时立即使用它们。

<link>就像格雷厄姆在评论中所说的那样，只有在任何与字体相关的操作（如标签（通过 html 加载字体）或 css 文件本身）之前指定预加载才能有效。

此外，您的请求取决于style.css. 在 html 中加载字体可以大大提高性能。通过将其内联在<style>标签中或通过<link>标签加载。

随着最近使用 CDN 对字体服务的改进，从本地保存的版本加载字体变得低效。本地版本应用作后备。我建议你看看 Google Fonts。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

附带说明.ttf不应该使用它，它没有被优化。@ https://stackoverflow.com/a/11002874/3645650考虑使用.woffand.woff2代替。

（在浏览器设置为隐身模式的情况下运行 lighthouse，以获取实际可靠的信息）。

推荐阅读