<link rel="preload" 具有不受支持的 `type` 值(字体预加载)

Won*_*nka 6 google-chrome font-face preloading

以下来自 Mozilla 的网络文档Preloading content with rel="preload"导致 chrome 中关于链接类型的错误:

<head>
  <meta charset="utf-8">
  <title>Web font example</title>

  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">

  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
Run Code Online (Sandbox Code Playgroud)

您可以在 GitHub 上查看完整的示例源代码也可以实时查看

这是我们实时链接的屏幕截图: 在此处输入图片说明

似乎这些是错误的不受支持的类型:

type="application/vnd.ms-fontobject"
type="image/svg+xml"
Run Code Online (Sandbox Code Playgroud)

对于这些 webfont 类型,如何在控制台中消除该错误?类型与它们的示例一样。我知道我可以通过过滤器物理隐藏错误而不显示在控制台中,但我真的想首先使用正确的解决方案来阻止它显示。

小智 4

遵循 w3c 关于preload 的type内容,您可以在 preload 标记 ex 中删除:

<link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" crossorigin>
<link rel="preload" href="fonts/cicle_fina-webfont.svg" as="image" crossorigin>
Run Code Online (Sandbox Code Playgroud)