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是   使用链接预加载预加载但在几秒钟内未使用   窗口的加载事件。请确保它没有预先加载   什么都没有。

我试图将font-face和font-family放在内联样式的索引页中：

<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

有一点值得early loading of fonts：

在获取字体时，您必须添加 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/>

警告说，在窗口加载事件

1 个答案: