让nginx支持跨域woff自定义字体

这个问题困扰我很久很久了,之前一直懒得去解决,因为问题只有在firefox下才有。今天使用自己的cdn上的font-awesome时,头疼的问题又出现了,自定义字体生成的icon在firefox下始终出不来,蛋了个疼呀!心里有种特别想把这个问题搞定的冲动,因为对比了下其他网站和自己网站,我似乎发现了问题的关键,不说先,我们先看看问题的现象。正常的状态:正常解析的页面

有问题的Firefox的解析状态:

不正常的页面

自定义字体对应的内容根本出不来,或者说是乱码,看了下其他网站,同样的源码,他们好好的,为啥我的不行呢?看了源码我似乎知道了些什么,按照我的思路,尝试了下,把我的样式和字体文件放在了测试域名下来访问,问题瞬间解决了,笑脸出来啦。原来是跨域资源共享惹的祸!

按照思路,Google了一把,在serverFault找到了解决方案,原理就是允许跨站共享,贴出来啊贴出来~

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

 

在你存放字体的nginx服务器配置文件中的server段内加上上面的代码,问题就搞定了,Firefox也乖乖的显示自定义字体啦!撒花~~

顺便看了下发现某些字体文件也是支持gzip的(woff字体据说已经是压缩过的了,没去验证过…),下面是支持gzip的字体mime列表:

  1. image/svg+xml
  2. application/vnd.ms-fontobject
  3. application/x-font-ttf
  4. font/opentype

你要问我这段加在哪里,我不会告诉你的,哈哈~~好了,问题搞定了,心情也好了,舒坦~

留下评论

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

%d 博主赞过: