时间戳

首页 > 解决方案 > 预加载 typekit 字体 css

css - 预加载 typekit 字体 css

问题描述

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

标签： csspreloadtypekit

解决方案

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

推荐阅读