网站全新改版,使用全新主题,精简文章,重新分类。同时建议大家使用FireFox、Opera、Safri、IE9+等高级浏览器访问!

七牛CDN导致@font-face制作的Web ico失效

Wordpress 木华澄 2068℃ 0评论

核心提示:使用七牛CDN加速网站的CSS文件后,发现网站的部分图标无法显示的表象,实则是因为七牛CDN的防盗链功能导致@font-face制作的Web ico失效。本文提出了根据提出问题的本质提出解决方法。

1、问题

网站使用七牛的CDN来静态化网站,加速WordPress后,发现网站使用@font-face制作的Web ico都无法显示了,显示为403。

2、问题分析

使用七牛CDN加速网站的CSS文件后,发现网站的部分图标无法显示,这只是表象,其实本质是:因为七牛CDN的防盗链功能导致@font-face制作的Web ico失效。

而失效的原因是:在七牛的空间中设置了防盗链,但是防盗链中没有设置访问css文件的域名,导致从css文件中访问到的图片的referer是css的域名,不在防盗链的白名单中,所以被403 forbidden了。

3、解决方法

根据上述的问题分析,那么解决问题的方法就有两个(使用任何一个就可以解决问题):

  • 修改七牛空间的防盗链设置,使之可以正常显示@font-face制作的Web ico。
  • 直接在七牛CDN中不缓存css文件。

4、参考资料

@font-face制作Web Icon

七牛+Nginx+图标字体=No ‘Access-Control-Allow-Origin’ header错误

转载请注明:程春杰博客 » 七牛CDN导致@font-face制作的Web ico失效

喜欢 (14)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 不错,学习了~
  2. 不错
    北京seo2015-04-06 18:03 回复
  3. 没用七牛,不知速度怎么样!!
    可米2015-03-27 11:50 回复
    • 七牛的速度杠杠的,呵呵,谁用谁知道
      程春杰2015-03-30 12:17 回复