预加载typekit字体css_Css_Preload_Typekit

预加载typekit字体css

css

预加载typekit字体css,css,preload,typekit,Css,Preload,Typekit,有人知道如何预加载typekit字体吗？现在我的计算字体是Ariel，我得到了错误：该资源已使用链接预加载进行预加载，但在窗口加载事件发生后的几秒钟内未使用。请确保它有一个适当的as值，并且是有意预加载的如果我进行正常导入，字体会工作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>font</title> <style>

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

该资源已使用链接预加载进行预加载，但在窗口加载事件发生后的几秒钟内未使用。请确保它有一个适当的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>

使用此代码：

<!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>

请在此处查看实时代码：

注意：仅当您使用了此处的正确链接时，此操作才有效。

使用此代码：

<!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>

请在此处查看实时代码：

注意：仅当您使用了此处的正确链接时，此链接才有效。

简短回答，您必须在head元素的末尾加载样式表

要了解原因，您可以查看mozilla的文档

以你的例子来说，应该是这样的：

<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>

简而言之，您必须在head元素的末尾加载样式表

要了解原因，您可以查看mozilla的文档

以你的例子来说，应该是这样的：

<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>

这是一个错误，我有同样的问题，我现在放弃：

有趣的是，我尝试使用预加载的唯一原因是铬灯塔测试向我推荐它

这里的图片显示它有点预加载，但没有实际工作！

这是一个bug，我也有同样的问题，现在我放弃了：

有趣的是，我尝试使用预加载的唯一原因是铬灯塔测试向我推荐它

这里的图片显示它有点预加载，但没有实际工作！

是的。它没有说什么。首先，你需要在那里做一个项目。我做了，这不是问题所在。OMGCheck这个：是的，它与一个正常的我做的。它没有说什么。首先，你需要在那里做一个项目。我做了，这不是问题所在。OMGCheck这个：是的，它与一个正常的工作这是如何使用，而不是当我们在Abobe做一个项目时，它说要使用：。在Codepen检查它是否工作：dwg7avv->这对所有人来说都是不同的。但这里他们说他们支持预加载这是如何使用的，而不是当我们在Abobe创建一个项目时，它说要使用：。在Codepen上检查它是否正常工作：dwg7avv->这对所有人来说都是不同的。但是这里他们说他们支持预加载