Question

我目前在使用S3托管在CDN上的Firefox中正确呈现字体呈现问题。如果我在本地运行该站点，我会在所有浏览器中运行很好的字体。当我在一个Heroku实例（沙箱）上运行它时，效果很好。

但是当我在“接受”框中运行应用程序时，所有内容都通过CDN提供。字体无法呈现。

我已确保将CORS文件自定义为：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedOrigin>http://acceptance.somesite.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>30000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>HOST</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

我使用了以下资源但没有成功：

我认为标题很好吗？

curl -i -X OPTIONS http://acceptance.builder.mhelabs.com/

HTTP/1.1 200 OK
Access-Control-Allow-Headers: x-requested-with
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: http://acceptance.somesite.com
Access-Control-Max-Age: 3628800
Date: Mon, 14 Oct 2013 19:44:48 GMT
Status: 200 OK
Vary: Accept-Encoding
X-Rack-Cache: invalidate, pass
transfer-encoding: chunked
Connection: keep-alive

curl -i http://cdn.somesite.com/assets/my-webfont-3ae860b18413d5.woff

HTTP/1.1 200 OK
Content-Type: application/font-woff
Content-Length: 27156
Connection: keep-alive
Access-Control-Allow-Headers: x-requested-with
Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: http://acceptance.somesite.com
Access-Control-Max-Age: 3628800
Age: 0
Cache-Control: public, max-age=2592000
Date: Mon, 14 Oct 2013 19:42:31 GMT
Last-Modified: Mon, 14 Oct 2013 19:04:08 GMT
Status: 200 OK
X-Content-Digest: 3c885674980901337099e06dc284e25dabf083c1
X-Rack-Cache: miss, store
Vary: Accept-Encoding
X-Cache: Miss from cloudfront
Via: 1.1 d5a6610c68af624ff3a6a9cdee479708.cloudfront.net (CloudFront)
X-Amz-Cf-Id: BJfEd-Z-juJgguV1wqZ6AL-Yh5eFkGz2xSwja7UQMxQpKL3M9m1HMA==

任何帮助都会很棒。

Answer 1

如果非Firefox浏览器发出第一个（新的）请求，S3将无法返回必需的HTTP标头，并且CDN将缓存（无用的）响应。

不使用S3 + CloudFront作为Web字体，而是使用实时应用程序（带有真实服务器）始终为Web字体提供正确的HTTP标头，以便CDN保证缓存必要的响应。

不从CDN / S3呈现的字体

1 个答案: