消除放大器页面上的渲染资源字体

Question

Google Lighthouse提出了AMP页面的问题

我尝试了多种解决方案，但不起作用

<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700,900&display=swap" as="font" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css?family=Cairo:300,400,600,700&subset=arabic,latin-ext&display=swap" as="font" crossorigin>

Answer 1

这对我有帮助（提出HTML索引）：

<style>
 @import url('https://fonts.googleapis.com/css2? 
 family=Open+Sans:wght@500;600;700;800&display=swap');
</style>

Answer 2

您可以添加一个Onload侦听器以将rel属性从PRELOAD更改为stylesheet

这看起来很像：

<link
  rel="preload"
  href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700,900&display=swap"
  onload="this.onload=null;this.rel='stylesheet'"
  as="style"
>

您可以在 web.dev

Answer 3

web.dev 表示您应该以这种方式预订：

<link rel="preload" 
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700,900&display=swap"
      as="style"
      onload="this.onload=null; this.rel='stylesheet'; document.body.classList.add('fonts-loaded')">

但是请使用另一种字体，但是要使用另一种字体直至字体已加载：

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body.fonts-loaded {
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}