字体不从 CDN/S3 呈现答案

【问题标题】：Fonts not rendering from CDN/S3字体不从 CDN/S3 呈现
【发布时间】：2013-10-22 12:26:38
【问题描述】：

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

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

【问题讨论】：

可能是您所在位置的代理设置吗？尝试从此处访问字体文件的链接，由于“避免代理”而被阻止。
@GiovanniSilveira 我实际上替换了上面的链接:)
哦，我刚刚注意到链接是 somesite.com :) 似乎也是 Chrome 中不会发生的问题，因此无法在这里进行太多测试： P

标签： css fonts amazon-web-services amazon-s3 cdn

【解决方案1】：

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

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

【讨论】：