[转]CDN中，字体文件的跨域问题和解决

转载2016-03-3111:06:54

@font-face是CSS3中的一个特性，可以把自己定义的Web字体嵌入到网页中，随着@font-face，越来越多的网页采用字体图标作为网页中的小图形。

比如Bootstrap就采用了Glyphicons字体图标在Bootstrap的架构下可以免费使用Glyphicons的250多种图标字体。另外一个比较常用的开源图标字体就是FontAwesome了，内含几百种各种size的图标文件，可以很容易实现FixedWidth，AnimatedIcons，Rotated，Flipped，Stacked等特性，跟能和Bootstrap无缝配合。悦合同就是使用FontAwesome作为字体图标。

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

字体跨域！！！！！！

由于悦合同的资源文件使用的是另外的域名（这样做是便于浏览器在加载时可以提高加载效率，关于domainhash也就是多域名来加速访问的问题有空再说），这样主域名和资源的域名尤其是字体文件，就形成跨域访问，在主域名的网站无法加载资源域名中的字体。

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

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

add_headerAccess-Control-Allow-Originhttp://www.yuehetong.com;

}

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

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