预加载 typekit 字体 css答案

【问题标题】：Preload typekit font css预加载 typekit 字体 css
【发布时间】：2020-06-10 04:01:26
【问题描述】：

有谁知道如何预加载 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>

【问题讨论】：

我做到了。它什么也没说。
首先，你需要在那里做一个项目。
我做到了，这不是这里的问题。天哪
检查这个：codepen.io/manaskhandelwal1/pen/WNvpEKY
是的，它适用于普通

标签： css preload typekit

【解决方案1】：

简短的回答，您必须在 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>

【讨论】：

这对我不起作用。你能帮我解释为什么吗？
我正在这样做 - <link rel="preload" href="https://use.typekit.net/dgp2bhj.css" as="style"> <link rel="stylesheet" href="https://use.typekit.net/dgp2bhj.css"> 仍然是它的说法——确保文本在 webfont 加载期间保持可见。

【解决方案2】：

使用此代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>font</title>
  <link href="https://use.typekit.net/dwg7avv.css">
  <style>
    body {
      font-family: proxima-nova, sans-serif;
      font-style: normal;
      font-weight: 100;
    }
  </style>
</head>

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

在此处查看实时代码：https://codepen.io/manaskhandelwal1/pen/WNvpEKY

注意： 这只有在您在这里使用了正确的链接时才有效： <link href="https://use.typekit.net/dwg7avv.css">。

【讨论】：

这是如何使用 use.typekit.net/dwg7avv.css" as="style" crossorigin> 而不是 use.typekit.net/dwg7avv.css"
当我们在 Abobe 做一个项目时，它说使用：<link href="https://use.typekit.net/dwg7avv.css">。 在 Codepen 上检查它是否正常工作：codepen.io/manaskhandelwal1/pen/WNvpEKY
dwg7avv -> 这对所有人来说都是不同的。
但是这里他们说他们支持预加载blog.typekit.com/2017/09/05/improving-your-web-font-performance

【解决方案3】：

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

有趣的是，我尝试使用预加载的唯一原因是向我推荐它的 chrome lighthouse 测试。

这里的图片有点预加载，但实际上并没有工作！

【讨论】：