加上cdn后字体跨域

@font-face是CSS3中的一个特性，能够把本身定义的Web字体嵌入到网页中，随着@font-face，愈来愈多的网页采用字体图标做为网页中的小图形。

好比Bootstrap就采用了Glyphicons 字体图标 在Bootstrap的架构下能够无偿使用Glyphicons的250多种图标字体。另一个比较经常使用的开源图标字体就是Font Awesome了，内含几百种各类size的图标文件，能够很容易实现Fixed Width，Animated Icons，Rotated，Flipped，Stacked等特性，跟能和Bootstrap无缝配合。悦合同就是使用Font Awesome做为字体图标。

当在配置CDN的时候，duang~~~

字体跨域！！！！！！

因为网站的资源文件使用的是另外的域名（这样作是便于浏览器在加载时能够提升加载效率，关于domain hash也就是多域名来加速访问的问题有空再说），这样主域名和资源的域名尤为是字体文件，就造成跨域访问，在主域名的网站没法加载资源域名中的字体。

处理这种跨域，只要设置Access-Control-Allow-Origin，容许目标域名访问就能够了，Access-Control-Allow-Origin是HTML5新增的一个特性，在资源类的域名下作以下配置（nginx的配置，apache类似处理）​

location ~ .*\.(eot|ttf|ttc|otf|eot|woff|woff2|svg)(.*) {

    add_header Access-Control-Allow-Origin http://www.yourdomain.com;

}

 

配置完后，例牌reload配置，刷新CDN缓存，就ok了。

这里说多一句，CDN会缓存当时的Response Header的，每次修改必须刷新CDN缓存，否则浏览器刷死也不会生效。​

 

 

CDN配置cors容许跨域访问时注意事项：

1.     目前不支持泛域名添加，如*.12345.com，仅支持域名精确匹配。

2.     目前仅支持配置一条白名单域名。

3.     若使用OSS产品做为源站，OSS与CDN平台同时配置Cors，CDN的配置将覆盖OSS。

4.     若源站为本身的服务器或ECS产品，建议先进行动静分离，静态文件使用CDN加速，CDN控制台配置的Cors功能，仅对静态文件生效。

 

 

Header set Access-Control-Allow-Origin "*"
# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}