柳州网站建设之css加载字体的跨域问题

刚才碰到一个css加载字体跨域问题，记录一下啊。

站点的动态请求与静态文件请求是不同的域名的。站点的域名为 www.domain.com，而静态文件的域名为 st.domain.com。

问题：

页面中加载css文件：<link rel="stylesheet" href="http://st.domain.com/css/uniform.css" />

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

@font-face {

 font-family: 'FontAwesome';

 src: url('../font/fontawesome-webfont.eot');

 }

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

解决方案：

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

具体步骤如下：

1.开启apache的mod_headers模块

LoadModule headers_module modules/mod_headers.so

2.在st.domain.com的主机配置中加入

nginx

server {

   ...

   # Fix @font-face cross-domain restriction in Firefox

   location ~* \.(ttf|ttc|otf|eot|woff|font.css)$ {

       add_header Access-Control-Allow-Origin "http://www.shouce.ren";

   }

   ...

}

apache

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

 <IfModule mod_headers.c>

   Header set Access-Control-Allow-Origin "http://www.shouce.ren"

 </IfModule>

</FilesMatch>

重启apache。

还可以添加mine

AddType application/vnd.ms-fontobject .eot

AddType font/ttf .ttf

AddType font/otf .otf

AddType application/x-font-woff woff

（转载：http://www.shouce.ren/post/view/id/108785）