警告从窗口的加载事件开始几秒钟内未使用字体预加载

本文介绍了警告从窗口的加载事件开始几秒钟内未使用字体预加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个网站，并且我尝试加快字体的加载速度，所以我提出：

I have a website and I've try to speed up loading of fonts so I've put:

<link rel="preload" href="{{ '/css/fonts/bebasneue-webfont.woff' | prepend: site.baseurl | prepend: site.url }}" as="font" type="font/woff"/> <link rel="preload" href="{{ '/css/fonts/bebasneue-webfont.ttf' | prepend: site.baseurl | prepend: site.url }}" as="font" type="font/ttf"/>

但我收到了Chromium的警告：

but I've got warning from Chromium:

资源 jcubic.pl/css /fonts/bebasneue-webfont.ttf 已使用链接预加载功能被预加载，但在窗口加载事件发生后的几秒钟内未使用。请确保未预装。

The resource jcubic.pl/css/fonts/bebasneue-webfont.ttf was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

资源 jcubic.pl/css/fonts/bebasneue-webfont.woff 是使用链接预加载功能预加载的，但在$几秒钟内未使用b $ b窗口的加载事件。请确保没有为预先加载它。

The resource jcubic.pl/css/fonts/bebasneue-webfont.woff was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

我试图将字体和字体-内联样式的索引页内的家庭：

I've tried to put the font-face and font-family inside index page in inline style:

<style type="text/css"> @font-face { font-family: 'bebas'; src: url('/css/fonts/bebasneue-webfont.eot'); src: url('/css/fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), url('/css/fonts/bebasneue-webfont.woff') format('woff'), url('/css/fonts/bebasneue-webfont.ttf') format('truetype'), url('/css/fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg'); font-weight: normal; font-style: normal; } header h1 { top: 0; left: 0; margin: 20px; font-family: bebas; font-size: 4em; } </style>

但我一直在收到该警告。如何删除此警告或为何显示警告？运行ajax以获取window.onload中的字体？

but I'm keep getting that warning. How can I remove this warning or why it's showing up? run ajax to fetch the font in window.onload?

推荐答案

值得在 早期加载字体 ：

获取字体时必须添加 crossorigin 属性，因为它们是是使用匿名方式获取的

You have to add a crossorigin attribute when fetching fonts, as they are fetched using anonymous mode

<link rel="preload" href="{{ '/css/fonts/bebasneue-webfont.woff' | prepend: site.baseurl | prepend: site.url }}" as="font" type="font/woff" crossorigin/> <link rel="preload" href="{{ '/css/fonts/bebasneue-webfont.ttf' | prepend: site.baseurl | prepend: site.url }}" as="font" type="font/ttf" crossorigin/>