您是否需要在 <head> 中使用 pre-load 字体并在 CSS 中将它们声明为 font-face？

Question

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

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

[header.php]

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

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

[style.css]

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

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

感谢大家的帮助。

Answer 1

两个声明的目标不同。

The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.

来源@https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

如果您自己添加预加载，您的字体将不会被考虑在内。您也必须指定操作。

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

Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on.

正如 Graham 在评论中所说，只有在任何字体相关操作之前指定预加载才能有效，例如 <link> 标记（通过 html 加载字体）或 css 文件本身。

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

随着最近对使用 CDN 的字体服务的改进，从本地保存的版本加载字体变得效率低下。本地版本应该用作后备。我会推荐你 take a look at 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 不应该使用，它没有被优化。 @ 考虑改用 .woff 和 .woff2。

(运行 lighthouse 将您的浏览器设置为隐身模式，以获得实际可靠的信息)。

您是否需要在 <head> 中使用 pre-load 字体并在 CSS 中将它们声明为 font-face？

Do you need to pre-load fonts in the <head> and declare them in CSS as a font-face?

css

wordpress

preload

font-face

lighthouse