受到Google字体对Page Speed的惩罚

Question

我正在使用网站上Google字体中的字体，并且正在通过CSS导入：

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,300i,400,400i,600,600i,700,800,900');

问题是Google PageSpeed Insights通知了以下信息：

确保在加载网页字体时文本仍然可见

使用CSS字体查看功能可确保在加载Web字体时用户可以查看文本。

在通知下方，列出了我要导入的所有字体规格：

有人遇到过这个问题吗？

您知道该如何调整吗？

我在多个使用Google字体的网站上收到此通知。

Answer 1

在function myComponent(props) { const fetchSomethingRef = useRef(props.fetchSomething); useEffect(() => { fetchSomethingRef.current(); }, []); } 下使用font-display: swap;或font-display: fallback;

带有@font-face的Google Front URL：

font-display: swap;

带有https://fonts.googleapis.com/css?family=Montserrat:100,300,300i,400,400i,600,600i,700,800,900&display=swap 的Google Front URL：

font-display: fallback;