解决CORS跨域字体资源禁止访问

Chrome since ~Sep/Oct 2014 makes fonts subject to the same CORS checks as Firefox has done https://code.google.com/p/chromium/issues/detail?id=286681. There is a discussion on this in https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

禁止CORS(Cross-Origin Resource Sharing)字体是一个十分奇怪的Policy,导致无法正常显示字体。这个问题在我之前建立主页的时候就碰到了,当时的解决办法十分简单,直接使用360官方(……)提供的库就能获得最佳支持了。现在随着我的wordpress博客逐渐开启全站静态文件CDN,这个问题又浮现出来了。倒不是页面上的文字没有办法显示,只是一些指示性的符号失效了。为了保证浏览站点的最佳体验,这个问题还是十分有必要解决的。

禁用W3 Total Cache中字体文件的CDN加速

Chrome+F12具有神奇的效果。打开之后换到Network选项卡,找到两个被屏蔽的字体,复制链接,然后粘贴到W3TC的控制台里面,加入“黑名单”。但是刷新了好多遍都没什么效果。之后发现这个字体是由JS加载的,似乎不是很好处理。但是我也不能一下子禁用整个主题文件的缓存,我也不希望禁用掉字体的缓存,因为服务器的带宽一直是我的网站的速度瓶颈……更何况主要的那个main.min.js有上百个K,每次下载都要好几十秒。

StackOverflow上查询到的解决方案

对Nginx(读Engine X,详情参加官网)服务器:

Nginx:

location ~* \.(eot|ttf|woff)$ {
   add_header Access-Control-Allow-Origin '*';
}

虽然我的服务器是基于nginx的,但是我自己没有我的共享主机的nginx的配置权限。

好在在后面找到了.htaccess的配置方法:点我。发现解决办法还是比较多的,主要的途径是发送一个允许CORS字体的header。

我使用的是这一种:

Header add Access-Control-Allow-Origin "*" 

于是问题就解决了。

补充一下:这个header是需要在资源的网站上添加的,而不是在请求资源的网站上的,相当于是一个许可证。刚才我自己也理解错了。

结果问题还是没有搞定。

问题出在Incapsula的CDN在获取我的资源的时候是不会完全将资源的Header以相同的方式发送给用户的。我又研究了一下源码,发现avada主要的css中引用这个字体的时候使用的是相对路径,而这个css是在CDN上的,所以浏览器就会把这个请求发给CDN服务器而不是主站。修复办法:改这个CSS啊!将字体的引用改为绝对的就可以了。没有办法通过CSS覆盖的办法改变引用的资源,也许是Cache的问题。只不过这样修改会每次升级都要重新修改一遍,而且字体文件没有了加速……不过问题倒不是很大。

现在只要等缓存全部改过来就行了。

avatar
Kerry Su