css加载字体跨域的解决方法
2015-8-25 15:32 Tuesday  

分类: CSS 标签: css 字体 跨域 webfont 评论(39) 浏览(24440)

站点静态文件放到了另外一个域名下(方便cdn)

站点的域名为 www.phpec.org,而静态文件的域名为 static.phpec.org。

现在问题来了,

页面中加载css文件:<link rel="stylesheet" href="http://static.phpec.org/css/font.css" />

此css中调用了外部字体如下:

@font-face { font-family: 'FontAwesome'; src: url('font/fontawesome-webfont.eot');}

浏览器报请求会报跨域错误的请求。

解决方案:

我们使用Access-Control-Allow-Origin:* 通过启用cors 来解决跨域问题。

具体步骤如下:

1.开启apache的mod_headers模块

sudo a2enmod headers

LoadModule headers_module modules/mod_headers.so

2.在host.phpec.org的主机配置中加入

Header set Access-Control-Allow-Origin *  或者是  http://www.phpec.org

重启apache。

第二步也可以改用在 static目录下配置 .htaccess文件 

<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">

  <IfModule mod_headers.c>

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

  </IfModule>

</FilesMatch>

+1 30

留下你的看法: