警告窗口加载事件后几秒钟内未使用字体预加载

Question

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

<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的警告：

资源http://jcubic.pl/css/fonts/bebasneue-webfont.ttf已使用链接预加载进行了预加载，但在窗口加载事件发生后的几秒钟内未使用。请确保没有没有预装它。

资源http://jcubic.pl/css/fonts/bebasneue-webfont.woff已使用链接预加载进行了预加载，但在窗口加载事件发生后的几秒钟内未使用。请确保没有没有预装它。

我试图将字体样式和字体系列以内联样式放入索引页中：

<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中的字体？

Answer 1

值得回顾一下早期加载字体的一点：

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

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