如何在 Firefox 中跨域加载字体

Question

我正在使用 Limelight CDN 处理静态文件。我在本机 Firefox 检查器中收到错误：

可下载字体：下载失败（字体系列：“nimbus-bold”样式：正常粗细：正常拉伸：正常 src 索引：1）：URI 错误或不允许跨站点访问 来源：http://cdn-store.example.com/fonts/nimbussanspot-bold-webfont.woff

CSS：

@font-face {
font-family: 'nimbus-bold';
src: url('/fonts/nimbussanspot-bold-webfont.eot');
src: url('/fonts/nimbussanspot-bold-webfont.eot%3F%23iefix') format("embedded-opentype");
src: url('/fonts/nimbussanspot-bold-webfont.woff') format("woff");
src: url('/fonts/nimbussanspot-bold-webfont.ttf') format("truetype");
src: url('/fonts/nimbussanspot-bold-webfont.svg%23nimbus_sans_p_otbold') format("svg");
font-weight: normal;
font-style: normal;
}

我尝试了以下方法，但没有帮助：

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

-bash-4.1$ curl -I http://cdn-store.example.com/fonts/nimbussanspot-bold-webfont.woff
HTTP/1.1 200 OK
Date: Thu, 13 Feb 2014 16:58:05 GMT
Server: Apache/2.2.15 (Oracle)
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT
Accept-Ranges: bytes
Vary: Accept-Encoding,User-Agent
Access-Control-Allow-Origin: *
Content-Type: text/plain
Content-Length: 24040
Connection: keep-alive

-bash-4.1$ curl -I http://store.example.com/fonts/nimbussanspot-bold-webfont.woff
HTTP/1.1 200 OK
Date: Thu, 13 Feb 2014 17:04:10 GMT
Server: Apache/2.2.15 (Oracle)
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT
ETag: "146124-5de8-4f24b944b4eff"
Accept-Ranges: bytes
Content-Length: 24040
Vary: Accept-Encoding,User-Agent
Access-Control-Allow-Origin: *
Connection: close
Content-Type: text/plain

编辑： 使用“AddType”指令我得到以下结果，但是字体不加载

$ curl -I http://store.example.com/fonts/nimbussanspot-bold-webfont.woff
HTTP/1.1 200 OK
Date: Fri, 14 Feb 2014 15:09:02 GMT
Server: Apache/2.2.15 (Oracle)
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT
ETag: "146124-5de8-4f24b944b4eff"
Accept-Ranges: bytes
Content-Length: 24040
Vary: Accept-Encoding,User-Agent
Access-Control-Allow-Origin: *
Connection: close
Content-Type: application/x-font-woff

$ curl -I http://cdn-store.example.com/fonts/nimbussanspot-bold-webfont.woff
HTTP/1.1 200 OK
Server: Apache/2.2.15 (Oracle)
Accept-Ranges: bytes
Vary: Accept-Encoding,User-Agent
Access-Control-Allow-Origin: *
Content-Type: application/x-font-woff
Age: 55
Date: Fri, 14 Feb 2014 15:08:59 GMT
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT
Content-Length: 24040
Connection: keep-alive

Answer 1

在您的服务器上，您需要为字体添加：Access-Control-Allow-Origin。
在.htaccess 添加：

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Answer 2

您的 webfont 文件在 text/plain Content-Type 中提供，而不是在 application/x-font-woff 等正确的类型中提供。

在您的 apache 配置文件中尝试这样的操作，看看是否有帮助：

<Location /webfont>
   Header set Access-Control-Allow-Origin "*"
   AddType application/vnd.ms-fontobject .eot
   AddType application/x-font-ttf .ttf
   AddType application/x-font-woff .woff
</Location>