预加载字体时无法让所有浏览器满意 - 控制台错误

Question

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

\n

情况1

\n

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

\n

火狐浏览器：

\n

Error 1\nPreload of /fonts/RobotoCondensed-Regular.ttf was ignored due to unknown \xe2\x80\x9cas\xe2\x80\x9d or \xe2\x80\x9ctype\xe2\x80\x9d values, or non-matching \xe2\x80\x9cmedia\xe2\x80\x9d attribute.\n\nError 2\nThe resource at \xe2\x80\x9c/fonts/open-sans-v26-latin-regular.woff2\xe2\x80\x9d preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.\n\nThe resource at \xe2\x80\x9c/fonts/RobotoCondensed-Regular.ttf\xe2\x80\x9d preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.\n

\n

铬合金：

\n

<link rel=preload> has an unsupported `type` value\n\nThe 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.\n

\n

情况 2（按照此处许多线程的建议删除类型）

\n

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

\n

火狐浏览器：

\n

The resource at \xe2\x80\x9c/fonts/open-sans-v26-latin-regular.woff2\xe2\x80\x9d preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.\n\nThe resource at \xe2\x80\x9c/fonts/RobotoCondensed-Regular.ttf\xe2\x80\x9d preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.\n

\n

铬合金：

\n

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.\n\nThe 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.\n

\n

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

\n

Answer 1

为了预加载字体，托管字体的服务器必须使用 CORS，即使您的 html 文件位于同一源/域。
（这没有什么充分的理由，这只是一个任意的限制）

使用 时<link>，如果crossorigin存在该属性，服务器必须返回正确的 CORS 标头才能使链接正常工作。
（请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link）

通常，如果您的资源与 html 文件托管在同一源上，则不需要此属性。

然而，预加载字体是一种特殊情况，始终需要跨域模式。
（请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload）