预加载Typekit字体CSS

Question

预加载Typekit字体CSS

7

有人知道如何预加载 typekit 字体吗？现在我的计算机字体是 Ariel，我收到以下错误：

资源 https://use.typekit.net/dwg7avv.css 已使用链接预加载，但在窗口加载事件后的几秒钟内未被使用。请确保它具有适当的 as 值，并且是有意预加载的。

如果我进行正常导入，则该字体可以工作。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>font</title>

  <style>
    body {
      font-family: proxima-nova, sans-serif;
      font-style: normal;
      font-weight: 100;
    }
  </style>
  <link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style" crossorigin>
</head>

<body>
  This is my font.
</body>

</html>

- ComCool

首先，您需要在那里创建一个项目。 - panda

请查看此链接：https://codepen.io/manaskhandelwal1/pen/WNvpEKY - panda

是的，它可以与普通的<link...一起使用。但无法与<link rel="preload"...一起使用。 - ComCool

请检查下面的代码... - panda

由于Adobe等公司未向您提供，因此<link rel="preload"...无法正常工作。 - panda

显示剩余2条评论

4个回答

5

我刚遇到了完全相同的问题，并且我用这个结构解决了它。

<!-- https://use.typekit.net & https://p.typekit.net is the font file origin (Lighthouse required both links from Adobe) -->
    <!-- It may not have the same origin as the CSS file (https://use.typekit.net/pgd3inh.css) -->
    <link rel="preconnect" href="https://use.typekit.net" crossorigin />
    <link rel="preconnect" href="https://p.typekit.net" crossorigin />

    <!-- We use the full link to the CSS file in the rest of the tags -->
    <link rel="preload" as="style" href="https://use.typekit.net/dwg7avv.css" />

    <link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" media="print" onload="this.media='all'" />

    <noscript>
        <link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css" />
    </noscript>

这篇文章帮助我解决了问题并且让我明白了原因。

- CrsCaballero

不要忘记确保您的字体文件内必须包含“swap”属性。 - CrsCaballero

0

截至2023年，这个方法是有效的。它将导致仅在Head中使用CSS嵌入的Adobe字体加载时间缩短。平均可节省约30％。不要忘记在“xxxxxxx”位置输入自己的CSS嵌入代码。Adobe建议使用preconnect和preload，但他们没有提供代码。只需将以下内容粘贴到Head中并输入您的嵌入代码即可。

<link rel="preconnect" href="https://use.typekit.net" crossorigin>
<link rel="preconnect" href="https://p.typekit.net" crossorigin>
<link rel="preload" href="https://p.typekit.net" crossorigin>
<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css"/>

- Peter Katoff

-4

这是一个错误，我曾经遇到同样的问题，现在我放弃了： https://bugs.chromium.org/p/chromium/issues/detail?id=593267

有趣的是，我尝试使用preload的唯一原因是Chrome Lighthouse测试建议我这样做。

这里有一张有点预加载但实际上不起作用的图片！

- LMC

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- monmonja · Accepted Answer

简短回答：您需要在 head 元素的末尾加载样式表。

为了解释原因，您可以查看 Mozilla 的文档 https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content 所以，根据您的示例，应该是这样的：

<head>
  <link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style">
  <link rel="preload" href="main.js" as="script">
  ...
  <link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css">
</head>