如何将 <link rel=preload> 应用于@font-face？

Posted 2023-03-06

【中文标题】如何将 <link rel=preload> 应用于@font-face？

【英文标题】：How to apply <link rel=preload> to @font-face?

【发布时间】：2020-11-12 21:37:42

【问题描述】：

Google 建议“考虑使用<link rel=preload> 来优先获取当前在页面加载后期请求的资源。”但是没有例子说明我们在使用@font-face 方法时应该如何使用它。 我应该改用 html 字体加载方法吗？

我现在使用什么来加载我的自定义字体：

@font-face 
    font-family: 'Custom';
    src: url("../fonts/Custom-Bold.eot");
    src: local("☺"), url("../fonts/Custom-Bold.woff") format("woff"), url("../fonts/Custom-Bold.ttf") format("truetype"), url("../fonts/Custom-Bold.svg") format("svg");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  
  
@font-face 
    font-family: 'Custom';
    src: url("../fonts/Custom-Heavy.eot");
    src: local("☺"), url("../fonts/Custom-Heavy.woff") format("woff"), url("../fonts/Custom-Heavy.ttf") format("truetype"), url("../fonts/Custom-Heavy.svg") format("svg");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  

【问题讨论】：

这能回答你的问题吗？ Preloading Google Fonts

【参考方案1】：

建议将 preload 应用于您的链接标签，而不是样式本身。

因此，例如，如果您的 css 代码位于名为“fonts.css”的文件中，您可以在 HTML 中放入以下行来访问它：

<link rel="preload" as="style" href="fonts.css">

然后您会告诉页面预加载您的“fonts.css”文件。这里的 "as" 应该是实际资源是什么，所以如果你真的想使用字体文件而不是样式表，只需更改 "as='style'”到“as='font'”。

【讨论】：

嗯，有道理。我的主要 style.css 文件中有 @font-face。我可能应该把它移到它自己的 css 文件中。

请注意，这只会预加载 CSS 文件，而不是实际的字体文件