未使用 HTTP2 推送的网络字体
HTTP2 pushed webfonts not used
我正在 HTTP2 响应中发送 Link 预加载 header。喜欢这个：
Link: </assets/script/main.js?h=1795387974>; rel=preload; as=script, </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font
脚本、样式和图像不会造成任何问题 - 它们被推送和使用。但是字体被推送然后 requested/fetched 再次和 Chromium 控制台抱怨：
The resource https://example.com/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.
这里是上述字体的响应 header。
推送：
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
我做错了什么？
您必须为字体添加跨域：
Link: </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font; crossorigin
有关详细信息，请参阅此处：https://github.com/w3c/preload/issues/32
在这里：https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/.
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.
我正在 HTTP2 响应中发送 Link 预加载 header。喜欢这个：
Link: </assets/script/main.js?h=1795387974>; rel=preload; as=script, </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font
脚本、样式和图像不会造成任何问题 - 它们被推送和使用。但是字体被推送然后 requested/fetched 再次和 Chromium 控制台抱怨：
The resource https://example.com/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.
这里是上述字体的响应 header。
推送：
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
我做错了什么？
您必须为字体添加跨域：
Link: </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font; crossorigin
有关详细信息，请参阅此处：https://github.com/w3c/preload/issues/32 在这里：https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/.
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.