未使用HTTP2推送的Webfonts

本文介绍了未使用HTTP2推送的Webfonts的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在HTTP2响应中发送Link预加载标头.像这样一个:

I'm sending a Link preload header in the HTTP2 response. Like this one:

Link: </assets/script/main.js?h=1795387974>; rel=preload; as=script, </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font

脚本，样式和图像不会引起任何问题-它们已被推送和使用.但是字体被推送，然后再次请求/获取，Chromium控制台抱怨:

scripts, styles and images don't cause any problem - they are pushed and used. But fonts are pushed and then requested/fetched again and the Chromium console complains:

资源 example/assets/font/sourcesanspro_regular.woff2已使用链接预加载进行了预加载，但在窗口的加载事件发生后的几秒钟内未使用.请确保未预装任何内容.

The resource example/assets/font/sourcesanspro_regular.woff2 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.

以下是提到的字体的响应标头.

Here are the response headers of the mentioned font.

按下:

accept-ranges:bytes cache-control:max-age=5184000, public content-length:16892 content-type:application/octet-stream date:Mon, 25 Sep 2017 09:22:05 GMT last-modified:Mon, 18 Sep 2017 14:33:31 GMT pragma:public status:200 x-content-type-options:nosniff x-frame-options:SAMEORIGIN x-http2-push:pushed x-xss-protection:1; mode=block

推送后请求:

accept-ranges:bytes cache-control:max-age=5184000, public content-length:16892 content-type:application/octet-stream date:Mon, 25 Sep 2017 09:22:05 GMT last-modified:Mon, 18 Sep 2017 14:33:31 GMT pragma:public status:200 x-content-type-options:nosniff x-frame-options:SAMEORIGIN x-xss-protection:1; mode=block

我在做什么错了?

推荐答案

您必须为字体添加交叉源:

You have to add crossorigin for fonts:

Link: </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font; crossorigin

有关更多信息，请参见此处: github/w3c/preload/issues/32 此处: www.smashingmagazine. com/2016/02/preload-what-is-it-good-for/.

For more information see here: github/w3c/preload/issues/32 and here: www.smashingmagazine/2016/02/preload-what-is-it-good-for/.

值得一提的一点:您必须添加一个crossorigin属性 提取字体时，因为它们是使用匿名模式CORS提取的. 是的，即使您的字体与页面具有相同的来源.抱歉.

One point worth going over: You have to add a crossorigin attribute when fetching fonts, as they are fetched using anonymous mode CORS. Yes, even if your fonts are on the same origin as the page. Sorry.