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

让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. 9#
    戒律
    戒律 Google Chrome 21.0.1180.89 Windows 7 2013-05-24 09:49 回复
    这些搞技术的。
    小松
    小松 Google Chrome 27.0.1453.93 Windows 8 x64 Edition 2013-05-24 10:16 回复
    @戒律:哈哈,注定一辈子搞基,是你想说的吗?
  2. 8#
    MB
    MB Firefox 20.0 Windows 7 2013-05-23 14:35 回复
    很好的思路
  3. 7#
    屏蔽
    屏蔽 Google Chrome 24.0.1312.57 Windows XP 2013-05-21 13:52 回复
    总共就几行代码,怎么人人都说不懂,虽然我也不懂~
    小松
    小松 Google Chrome 26.0.1410.64 Windows 8 x64 Edition 2013-05-21 15:21 回复
    @屏蔽:说明大家都没看就回复了!
  4. 6#
    wmtimes
    wmtimes Google Chrome 25.0.1364.152 Windows 7 2013-05-20 17:18 回复
    什么情况?代码,看不懂。
    小松
    小松 Google Chrome 26.0.1410.65 Mac OS X 10.8.3 2013-05-20 18:57 回复
    @wmtimes:额,你怎么可以这样说呢?
  5. 5#
    gost认证
    gost认证 Maxthon 3.0 Windows 7 2013-05-20 15:44 回复
    亲 完全看不懂 额
  6. 4#
    阿邙
    阿邙 Firefox 21.0 Windows 7 x64 Edition 2013-05-19 21:47 回复
    如果自定义汉字的话太大,始终是累赘。汉字真是杯具啊,希望有牛人发明一种更min的字体文件。。
    小松
    小松 Mobile Google Chrome  iPhone iOS 6.1.2 2013-05-20 08:17 回复
    @阿邙:目前也就总在自定义icon上,减少请求,还能随意放大缩小,不会变形,这个是图片无法超越的
  7. 3#
    沈梦姿
    沈梦姿 Google Chrome 25.0.1364.97 Windows XP 2013-05-18 15:41 回复
    对代码一窍不通
    小松
    小松 Mobile Google Chrome  iPhone iOS 6.1.2 2013-05-18 17:53 回复
    @沈梦姿:没关系!
  8. 2#
    小子
    小子 Google Chrome 28.0.1500.6 Mac OS X 10.8.3 2013-05-17 21:49 回复
    好像chrome加载mp3文件的时候用的XHR也存在跨域的问题,这个是用howler.js这个库的时候发现的
    小松
    小松 Google Chrome 26.0.1410.65 Mac OS X 10.8.3 2013-05-17 22:20 回复
    @小子:没用过mp3的,不过这个字体的问题却困扰我很久很久了,登录界面就一直困扰着,现在终于解决了
  9. 1#
    黎健雄
    黎健雄 Google Chrome 22.0.1229.95 Windows XP 2013-05-17 21:11 回复
    这个可以实现。。
    小松
    小松 Google Chrome 26.0.1410.65 Mac OS X 10.8.3 2013-05-17 22:18 回复
    @黎健雄:你指的是神马可以实现?
    黎健雄
    黎健雄 Google Chrome 22.0.1229.95 Windows XP 2013-05-18 13:20 回复
    @小松:什么都可以实现。。强大了。。不懂代码就是苦逼。。
    小松
    小松 Mobile Google Chrome  iPhone iOS 6.1.2 2013-05-18 13:39 回复
    @黎健雄:额,你不是应该懂的吗?
1 2

随机日志:

推荐日志:

彩色标签:

sitemap