代码之家  ›  专栏  ›  技术社区  ›  snøreven

未使用HTTP2推送的webfonts

  •  10
  • snøreven  · 技术社区  · 7 年前

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

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

    资源 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
    

    我做错了什么?

    1 回复  |  直到 7 年前
        1
  •  6
  •   Barry Pollard    4 年前

    您必须为字体添加交叉原点:

    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/

    值得一提的是:必须添加交叉原点属性 获取字体时,因为它们是使用匿名模式CORS获取的。