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

Posted

技术标签:

【中文标题】<link rel="preload" 的 `type` 值不受支持（字体预加载）【英文标题】：<link rel="preload" has an unsupported `type` value (fonts preload) 【发布时间】：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 有什么不同吗？ 我分别改了，没区别。 这是一个警告而不是错误。根据规范，这是向后兼容的，因为资源仍会在需要时加载（但稍晚一点） 【参考方案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

【讨论】：

以上是关于<link rel="preload" 的 `type` 值不受支持（字体预加载）的主要内容，如果未能解决你的问题，请参考以下文章

<link rel="alternate" href="" hreflang="en" />

link标签rel="alternate"属性的作用及用法

<LINK rel=SUBRESOURCE href="file"> 不缓存，尽管有正确的缓存头。似乎下载了两次，响应为 200OK

jsp修改地址栏图标 我试过在head中加<link rel=”icon” href=”/favicon.ico”>，但是都没有用。为啥？

<link rel="stylesheet" type="text/css" href="css/style.css"

为啥网页文件前面要加反斜杠比如 <link href="/cssnew/index.css" rel="stylesheet" >