1

我目前在使用 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 选项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==

对此的任何帮助都会很棒。

4

1 回答 1

0

如果非 Firefox 浏览器发出第一个(新的)请求,S3 将无法返回必要的 HTTP 标头,并且该(无用的)响应将被 CDN 缓存。

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

于 2013-10-18T02:56:27.300 回答