<link rel="preload" 的 `type` 值不受支持（字体预加载）答案

【问题标题】：<link rel="preload" has an unsupported `type` value (fonts preload)<link rel="preload" 的 `type` 值不受支持（字体预加载）
【发布时间】：2018-04-26 20:09:40
【问题描述】：

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

你可以看到完整的example source code on GitHub (also see it live)

这里是实时链接的屏幕截图：

似乎这些是错误输出的不受支持的类型：

type="application/vnd.ms-fontobject"
type="image/svg+xml"

对于那些 webfont 类型，我怎样才能消除控制台中的错误？这些类型与他们的示例相同。我知道我可以通过过滤器物理隐藏错误以不显示在控制台中，但我真的想首先使用正确的解决方案阻止它显示。

【问题讨论】：

将as 属性分别更改为application 和image 有什么不同吗？
我分别改了，没区别。
这是一个警告而不是错误。根据规范，这是向后兼容的，因为资源仍会在需要时加载（但稍晚一点）

标签： google-chrome font-face preloading

【解决方案1】：

follow w3c about preload，你可以在preload标签中删除type 例如：

<link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" crossorigin>
<link rel="preload" href="fonts/cicle_fina-webfont.svg" as="image" crossorigin>

【讨论】：

【解决方案2】：

.eot 字体在 Chrome 中不受支持，请参阅： https://caniuse.com/#feat=eot

【讨论】：