你的位置:快乐忆站 \ 分享 \ 文章正文

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

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

正常的状态:

正常解析的页面

有问题的Firefox的解析状态:

不正常的页面

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

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

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

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

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

image/svg+xml 
application/vnd.ms-fontobject 
application/x-font-ttf 
font/opentype

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

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 19#
    熊猫家族
    熊猫家族 Google Chrome 28.0.1500.95 GNU/Linux x64 2013-08-12 21:49 回复
    额  按现在也遇到这样的问题  可是我用的阿里云的云服务  网站在github上,还是不知道咋解决。。 郁闷
    小松
    小松 Google Chrome 28.0.1500.71 Mac OS X 10.8.5 2013-08-12 22:10 回复
    @熊猫家族:你的主机能自己修改东西吗?
    熊猫
    熊猫 Google Chrome 27.0.1453.93 GNU/Linux x64 2013-08-13 09:36 回复
    @小松:俺没有自己的主机服务器,用的是在github使用jekyll生成的静态文件来搭建的  所以没法改
    小松
    小松 Google Chrome 28.0.1500.71 Mac OS X 10.8.5 2013-08-13 12:31 回复
    @熊猫:那只能是github帮你去做了
  2. 18#
    老王
    老王 Google Chrome 27.0.1453.110 Windows 7 2013-06-11 01:31 回复
    没看懂,呵呵
    小松
    小松 Google Chrome 27.0.1453.110 Mac OS X 10.8.4 2013-06-13 09:22 回复
    @老王:老王重现江湖了?
  3. 17#
    SB
    SB Maxthon 3.0 Windows 7 2013-06-06 16:20 回复
    隔行如隔山还真是不太懂啊和
  4. 16#
    朵未
    朵未 Maxthon 4.1.0.800 Windows 7 x64 Edition 2013-06-01 16:23 回复
    这东西我看不懂,纯围观啦。
    小松
    小松 Mobile Google Chrome  iPhone iOS 6.1.2 2013-06-02 09:48 回复
    @朵未:就是解决一个问题,记录下
  5. 15#
    木本无心
    木本无心 Firefox 20.0 Windows XP 2013-05-31 21:13 回复
    小松最近要换主题了?好期待啊。。
    小松
    小松 Google Chrome 27.0.1453.93 Mac OS X 10.8.4 2013-05-31 21:25 回复
    @木本无心:听谁说的?我咋不知道?无限期拖延中。。。
  6. 14#
    海蓝
    海蓝 Google Chrome 25.0.1364.97 Windows 7 2013-05-30 11:23 回复
    这个评论的样式很新鲜呀
    小松
    小松 Google Chrome 27.0.1453.94 Windows 8 x64 Edition 2013-05-30 13:13 回复
    @海蓝:也许过两天就换了~
    海蓝
    海蓝 Google Chrome 25.0.1364.97 Windows 7 2013-05-31 09:20 回复
    @小松:不过这个回复 要是没来过的 还真有点难找呀 在左边点了回复 要跑右边来码字
    小松
    小松 Google Chrome 27.0.1453.93 Mac OS X 10.8.4 2013-05-31 09:28 回复
    @海蓝:哈哈,习惯就好~
    海蓝
    海蓝 Google Chrome 25.0.1364.97 Windows 7 2013-05-31 10:00 回复
    @小松:刚习惯了 博主没准就换呢
    小松
    小松 Google Chrome 27.0.1453.94 Windows 8 x64 Edition 2013-05-31 10:22 回复
    @海蓝:那不会,就我这速度,年初就说要换了,换到现在都没换掉
    海蓝
    海蓝 Google Chrome 25.0.1364.97 Windows 7 2013-06-03 10:40 回复
    @小松:那就好 博主可别刚说完就换哦
    小松
    小松 Google Chrome 27.0.1453.93 Mac OS X 10.8.4 2013-06-03 15:12 回复
    @海蓝:换不了啊,一直懒得动
    海蓝
    海蓝 Google Chrome 25.0.1364.97 Windows 7 2013-06-04 10:10 回复
    @小松:那挺好
  7. 13#
    SB
    SB Firefox 21.0 Windows XP 2013-05-29 16:55 回复
    有一门技术就是好,博主挺厉害的,给您评论的也个个是人才!
  8. 12#
    第三人称
    第三人称 Google Chrome 27.0.1453.94 Windows 8 x64 Edition 2013-05-26 17:35 回复
    有钱淫,玩阿里云。。。
    小松
    小松 Google Chrome 27.0.1453.93 Mac OS X 10.8.4 2013-05-26 21:03 回复
    @第三人称:优惠购的,你懂的~
  9. 11#
    沈梦姿
    沈梦姿 Google Chrome 25.0.1364.97 Windows XP 2013-05-25 18:04 回复
    高技术的可以使劲的折腾
  10. 10#
    林西老九
    林西老九 Internet Explorer 8.0 Windows XP 2013-05-25 15:22 回复
    哈哈,太好了,解决了、蛋疼。。。。。
    小松
    小松 Google Chrome 27.0.1453.93 Mac OS X 10.8.4 2013-05-25 22:55 回复
    @林西老九:额,今天部门活动。。。悲催了,错过了老九~
1 2

随机日志:

推荐日志:

彩色标签:

sitemap