CDN 网络字体在 Firefox 中不起作用

Question

我们正在通过我们的 CDN 添加我们的自定义网站字体。我们的 CSS 代码如下。这是在我们的main.css 文件中，该文件包含在我们网站的标题中。

这适用于 OSX 上的 Safari 和 Chrome，但在 Windows 上，它仅适用于 Safari。也许还有 IE10。在 Firefox 上它根本不起作用。在 IE9 等上它有时可以工作。 （多么令人讨厌的浏览器。）

一些网站建议 Firefox 需要一个相对字体 URL。但是我们需要为我们的字体使用 CDN。 Google 字体如何在 Firefox 中工作是否存在“同源”问题？

我们的主服务器是 Nginx。静态字体文件是从那里提供的，所以Allow Origin "*" 的 Apache 建议对我们没有多大帮助。在这种情况下，CDN 是从我们的网站提取的并带有我们自己的标头。因此，如果我们需要通过 Nginx 发送标头，我们可以这样做。

字体 CSS

    @font-face{font-family:'Custom-Sans'
        ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.eot')
        ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-light-webfont.ttf') format('truetype');font-weight:200;font-style:normal}
    @font-face{font-family:'Custom-Sans'
        ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.eot')
        ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-thin-webfont.ttf') format('truetype');font-weight:100;font-style:normal}
    @font-face{font-family:'Custom-Sans'
        ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.eot')
        ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-regular-webfont.ttf') format('truetype');font-weight:normal;font-style:normal}
    @font-face{font-family:'Custom-Sans'
        ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.eot')
        ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-semibold-webfont.ttf') format('truetype');font-weight:500;font-style:normal}
    @font-face{font-family:'Custom-Sans'
        ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.eot')
        ;src:url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.eot?#iefix') format('embedded-opentype'),url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.woff') format('woff'),url('http://cache.MYDOMAIN.com/Custom-Sans-bold-webfont.ttf') format('truetype');font-weight:700;font-style:normal}

还有——

字体文件的标题（由 Nginx 提供）

HTTP/1.1 200 OK
Accept-Ranges: bytes
Access-Control-Allow-Origin: *.MYDOMAIN.com
Cache-Control: max-age=315360000
Content-Type: application/octet-stream
Date: Sun, 10 Aug 2014 15:10:29 GMT
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Last-Modified: Mon, 28 Jul 2014 14:52:44 GMT
Server: Hosting Inc
Vary: Accept-Encoding
Content-Length: 20077

Answer 1

访问控制头除了域外还需要scheme：

Access-Control-Allow-Origin: http://*.mydomain.com

如果您使用的不是 80，它还需要一个端口。