关于@font-face的跨域请求问题

font-icon

如果你网站上的图标在一个域名下正常,在另外一个域名下无法显示那你就需要看看这篇文章了。没有多少杂技,只有干货。

为什么另外一个域名没有图标?

一般情况下是因为跨域问题,打开console你可以看到这么一段话:

Font from origin ‘http://liyaodong.sinaapp.com‘ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://liyaodong.com‘ is therefore not allowed access.

解决办法?

1. 简单粗暴型

把字体文件放到绝对路径下,并且将要请求的页面加入到防盗链白名单。这是博主最后的做法,在折腾其他方法无果后。

2.一劳永逸法

添加Access-Control-Allow-Origin Http header 。这个具体根据你所使用的后端语言不同方法不同,如果是wordpress可以有一个现成的插件可以用。WordPress-Cross-Domain-Plugin 但是博主亲测即时设置了也没用,因为你的js文件请求的直接是/fonts/xxx.woff|ttf文件,而你看这个文件的http头是没有被插件设置上header的。

那么问题来了该怎么办?机智的程序员灵光一现拍案说到,为什么不用.htaccess ?楼主机智,说的好。

[code]

Apache config

<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"

nginx config

if ($filename ~ ^.?.(eot)|(ttf)|(woff)$){
add_header Access-Control-Allow-Origin *;
}
[/code]

参考链接:Cross-Domain Fonts

可我的是SAE主机,不支持自定义.htaccess,按照官方文档来看只支持一个叫Appconfig的东西,看了半天也没看出来怎么自定义这个header。所以我又拍了一下脑子,直接放到SAE的Storage里吧。然后再把css文件里的路径换成http://xxxx.com/fonts/xxx.xxx这样的路径,ok问题解决了。

恩,就到这里吧。好困,但是还想再来一篇。

注:头图来自@Mike