如何正确预加载谷歌字体答案

【问题标题】：How to preload google fonts correctly如何正确预加载谷歌字体
【发布时间】：2021-03-13 18:17:13
【问题描述】：

如何正确预加载谷歌字体，而不会在控制台中出现警告？

这是我的代码：

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600;700&family=Open+Sans:wght@100;400;700&display=swap"
          rel="preload" as="style" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600;700&family=Open+Sans:wght@100;400;700&display=swap"
          rel="stylesheet">

我已经在预加载链接中添加了crossorigin属性，但是警告仍然在这里

【问题讨论】：

标签： preloading google-fonts

【解决方案1】：

只需在主样式表中添加跨域属性

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600;700&family=Open+Sans:wght@100;400;700&display=swap"
          rel="preload" as="style" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600;700&family=Open+Sans:wght@100;400;700&display=swap"
          rel="stylesheet" crossorigin="anonymous">

【讨论】：