轉載 2016-03-31 11:06:54
@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.yuehetong.com;

}


配置完後，例牌reload配置，重新整理CDN快取，就ok了。

這裡說多一句，CDN會快取當時的Response Header的，每次修改必須重新整理CDN快取，不然瀏覽器刷死也不會生效。​