首页 > 解决方案 > 尽管使用了 media=print,谷歌字体仍会阻止渲染

问题描述

我正在使用下面的代码来获取 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">

标签: htmllighthousegoogle-font-apiweb-performance

解决方案


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

渲染阻塞 - media="all"

非渲染阻塞 - media="print"


推荐阅读