加上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 *;
}