@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)(.*)
配置完後，例牌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)$)
關於字型跨域
寫在前面的話 跨域問題啊 字型跨域，居然碰到了 網上蒐羅來的答案，有機會的可以試試有沒有效 原文 css載入字型的跨域問題 載 剛才碰到乙個css載入字型跨域問題，記錄一下啊。站點的動態請求與靜態檔案請求是不同的網域名稱的。站點的網域名稱為 www.domain.com，而靜態檔案的網域名稱為 st...
apache css 跨域 css載入字型跨域問題
剛才碰到乙個css載入字型跨域問題，記錄一下。站點的動態請求與靜態檔案請求是不同的網域名稱的。站點的網域名稱為 www.domain.com，而靜態檔案的網域名稱為 st.domain.com。問題 頁面中載入css檔案 此css中呼叫了外部字型如下 font face font family fo...
避免跨域的CDN部署方案
我們的乙個專案採用動靜分離的部署方式，服務介面在自己的伺服器上，靜態資源儲存在oss，通過cdn訪問。不過這樣有時會有跨域問題。本文總結解決的辦法 原本的做法，服務介面部署在自己的伺服器上，通過網域名稱api.com訪問，不走cdn 靜態檔案，包括html，css，js，等，部署在oss上，通過網域...