预装typekit字体css

niwlg2el 于 2023-05-08 发布在其他

关注(0)|答案(4)|浏览(144)

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

资源https://use.typekit.net/dwg7avv.css已使用link preload预加载，但在窗口的load事件发生后的几秒钟内未使用。请确保它有一个适当的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>

css

来源：https://stackoverflow.com/questions/60411231/preload-typekit-font-css

4条答案

按热度按时间

xxhby3vn1#

简而言之，您必须在head元素的末尾加载样式表。
要了解原因，可以查看mozillahttps://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>

赞(0）回复(0）举报 2023-05-08

0wi1tuuw2#

我也遇到过同样的问题，我用这个结构解决了

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

这个article帮助我解决它，并知道为什么

赞(0）回复(0）举报 2023-05-08

byqmnocz3#

到2023年，这一工作。这将导致更短的加载时间为Adobe字体与CSS嵌入只在头。平均保存30%左右。别忘了输入你自己的CSS嵌入代码来代替“xxxxxxx”。Adobe推荐预连接和预加载，他们只是不提供代码。只需将以下内容粘贴到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"/>

赞(0）回复(0）举报 2023-05-08

8tntrjer4#

这是一个bug，我遇到了同样的问题，现在我放弃了：https://bugs.chromium.org/p/chromium/issues/detail?id=593267
有趣的是，我尝试使用preload的唯一原因，是chrome lighthouse测试向我推荐的。
这里的图片，它有点预加载，但实际上没有工作！

赞(0）回复(0）举报 2023-05-08

我来回答

预装typekit字体css

4条答案

相关问题

热门标签

最新问答