文章/答案/技术大牛

发布

社区首页 >问答首页 >预加载typekit字体css

问预加载typekit字体css
EN

Stack Overflow用户

提问于 2020-02-26 09:58:53

回答 3查看 7.9K关注 0票数 6

有人知道如何预装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>

css

preload

typekit

回答 3

Stack Overflow用户

发布于 2020-03-23 10:59:07

简单地说，您必须在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>

票数 6

Stack Overflow用户

发布于 2022-07-06 00:05:25

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

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

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

票数 1

Stack Overflow用户

发布于 2020-08-21 19:01:43

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

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

在这里，它的图片有点预加载，但实际上不工作！

票数 -4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60411231

复制

相似问题

问预加载typekit字体css
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问预加载typekit字体cssEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问预加载typekit字体css
EN