尽管使用了 media=print，谷歌字体仍会阻止渲染答案

【问题标题】：Google font is blocking render despite using media=print尽管使用了 media=print，谷歌字体仍会阻止渲染
【发布时间】：2021-10-11 00:30:48
【问题描述】：

我正在使用下面的代码来获取 Google 字体。尽管使用了media="print"，lighthouse 还是检测到字体被渲染阻塞。我如何使它成为非阻塞的？ <link rel="stylesheet" media="print" onload='this.media="all",this.onload=null' href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap">

【问题讨论】：

标签： html lighthouse google-font-api web-performance

【解决方案1】：

如果你能提供一个有用的测试页面。我很快创建了两个测试来证明它可以与 Lighthouse 一起正常工作

Render Blocking - media="all"

Non Render Blocking - media="print"

【讨论】：

【解决方案2】：

我用这个...

<link rel="stylesheet" href="/stylesheet.css" media="print" onload="this.media='all'" />

我不确定onload='this.media="all",this.onload=null' 会做什么...

<link rel="stylesheet" media="print" onload='this.media="all",this.onload=null' href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap">

【讨论】：