首页 > 解决方案 > 预加载字体时不能让所有浏览器都满意 - 控制台错误

问题描述

我一直在尝试预加载字体,无论我如何编写它,Chrome 或 Firefox 都会引发某种控制台错误。

情况1

<link rel="preload" href="/fonts/open-sans-v26-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/RobotoCondensed-Regular.ttf" as="font" type="font/truetype" crossorigin>

火狐:

Error 1
Preload of /fonts/RobotoCondensed-Regular.ttf was ignored due to unknown “as” or “type” values, or non-matching “media” attribute.

Error 2
The resource at “/fonts/open-sans-v26-latin-regular.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

The resource at “/fonts/RobotoCondensed-Regular.ttf” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

铬合金:

<link rel=preload> has an unsupported `type` value

The resource /fonts/open-sans-v26-latin-regular.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

案例 2(此处删除许多线程上推荐的类型)

 <link rel="preload" href="/fonts/open-sans-v26-latin-regular.woff2" as="font"  crossorigin>
  <link rel="preload" href="/fonts/RobotoCondensed-Regular.ttf" as="font"  crossorigin>

火狐:

The resource at “/fonts/open-sans-v26-latin-regular.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

The resource at “/fonts/RobotoCondensed-Regular.ttf” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

铬合金:

The resource /fonts/open-sans-v26-latin-regular.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

The resource /fonts/RobotoCondensed-Regular.ttf was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

如何使这些控制台错误消失?页面加载时会立即显示字体。

标签: htmlperformancefonts

解决方案


推荐阅读