0ms潜在节省消息的图片参考
我一直在Google PageSpeed中得到这个警告，现在我完全没有主意了。我使用下面的代码来设置字体族:
@font-face {
font-family: "Roboto", sans-serif;
font-display: swap;
font-weight: 500;
src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
}
我也有rel="preconnect"在我的index.html为谷歌字体相关的URL。
当潜在的节省为零时，为什么我得到这个警告?
图像中的错误表明您的字体族缺少font-display设置。看看你发布的代码，确实有一个。
但是你加载google字体的方式根本不正确，可能会导致这个问题。
你所做的是导入整个谷歌字体css (https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap)到你的字体族的src属性。
问题是:如果你查看https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap你会发现它已经包含了所有的字体族，所以你应该像这样使用它
@import https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap
，甚至直接导入到你的htmlhead:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap">
为了使事情更清楚，这里https://fonts.google.com/specimen/Roboto?query=roboto建议您如何导入文件:
要嵌入字体，将代码复制到html
a)链接标签
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
b) @ import
<style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); </style>
指定族的CSS规则
font-family: 'Roboto', sans-serif;
原来是我的一个包(@agm/core)导致了这个问题。删除后，PageSpeed不再显示问题。