[英]HTTP2 pushed webfonts not used
我在 HTTP2 響應中發送一個Link
預加載標頭。 像這個:
Link: </assets/script/main.js?h=1795387974>; rel=preload; as=script, </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font
腳本、樣式和圖像不會引起任何問題 - 它們被推送和使用。 但是字體被推送然后再次請求/獲取並且 Chromium 控制台抱怨:
資源https://example.com/assets/font/sourcesanspro_regular.woff2是使用鏈接預加載預加載的,但在窗口加載事件的幾秒鍾內未使用。 請確保它不是無故預加載的。
以下是上述字體的響應標頭。
推:
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
我做錯了什么?
您必須為字體添加 crossorigin:
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/ .
值得一提的一點:在獲取字體時必須添加 crossorigin 屬性,因為它們是使用匿名模式 CORS 獲取的。 是的,即使您的字體與頁面同源。 對不起。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.