'解决 Web fonts 在 Firefox 下不加载的问题'

今天给大叔的 Eureka 换新首页,换完之后大叔表示在 Firefox 下 Webfont 不加载。

开始觉得肯定是 MIME Types 的问题。。。于是,去 Rackspace Cloud Files 里把 Content-Type 修正了一下。

修正之后还是不正常,开 Google 搜索了下。

然后发现 Firefox 是不考虑 Webfonts 的 Content-Type 的:

Note: Because there are no defined MIME types for TrueType, OpenType, and Web Open File Format (WOFF) fonts, the MIME type of the file specified is not considered.

问题出在这里:

In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.

如果 Web fonts 不是与发起请求的页面在一个域下,那么除非 HTTP access control 允许了,否则这个字体文件是不会被载入的。

嗯,知道问题在哪儿就简单了,去加个 Custom-Header:

Access-Control-Allow-Origin: https://xxooxxoo.xxx

然后刷新下 CDN 即可。。。

火狐,就你事儿多。。。

参考:

[1] @font-face – Mozilla Developer Network