firefox和IE9不支持對icon font字體的跨域訪問

一、關於icon font

如今主流瀏覽器（包括IE6）都支持css3的自定義字體(@font-face)，所以能夠嘗試使用font來替換圖片展現網站的各類icon。可是各瀏覽器對於字體文件格式的支持不盡一致。目前主流瀏覽器對於icon font的支持以下：

• IE：從IE4開始支持eot格式，IE9開始支持woff。
• webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，ios 4.2如下只支持SVG字體； Safari5.1+ 開始支持woff格式
• Chrome：除webkit支持的之外，從Chrome 6開始，開始支持woff格式；
• Firefox：支持.ttf和.otf，從Firefox 3.6開始支持woff格式；
• Opera：支持.ttf、.otf、.svg。 Opera 11開始支持woff；
• iPad, iphone and Android 3.0+ 支持SVG fonts。

使用font-face聲明字體：

	 
     @font-face {
        font-family: 'uxiconfont';
        src: url('uxiconfont.eot'); /* IE9*/
        src: url('uxiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('uxiconfont.woff') format('woff'), /* chrome、firefox */
             url('uxiconfont.ttf')  format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
             url('uxiconfont.svg#uxiconfont') format('svg'); /*  iOS 4.1- */
    }

      爲何IE和火狐下顯示不同呢？查資料得知「Firefox和IE9不支持對icon font字體的跨域訪問」，須要在圖標字體文件所在服務器配置Header參數「Access-Control-Allow-Origin」容許當前域名才能夠。並且，通過驗證，必須將參數「Access-Control-Allow-Origin」配置爲「*」才能夠，配置爲「*.當前域名」並不能夠，不知道啥緣由。

      

      具體這個配置是怎麼加上來的，由於是運維同事幫忙配置的，方法不得而知，能夠參考《解決firefox和IE9對icon font字體的跨域訪問問題》，核心是增長「Access-Control-Allow-Origin:*」的響應輸出。在找運維同事幫忙添加配置前，爲了肯定方案可行性，利用Fiddler攔截http響應，添加了頭部，具體能夠參考《fiddler設置HTTP返回頭的兩種方式》，再次感覺了Fiddler的強大的功能。

 

一、關於icon font

如今主流瀏覽器（包括IE6）都支持css3的自定義字體(@font-face)，所以能夠嘗試使用font來替換圖片展現網站的各類icon。可是各瀏覽器對於字體文件格式的支持不盡一致。目前主流瀏覽器對於icon font的支持以下：

• IE：從IE4開始支持eot格式，IE9開始支持woff。
• webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，ios 4.2如下只支持SVG字體； Safari5.1+ 開始支持woff格式
• Chrome：除webkit支持的之外，從Chrome 6開始，開始支持woff格式；
• Firefox：支持.ttf和.otf，從Firefox 3.6開始支持woff格式；
• Opera：支持.ttf、.otf、.svg。 Opera 11開始支持woff；
• iPad, iphone and Android 3.0+ 支持SVG fonts。

使用font-face聲明字體：

	 
     @font-face {
        font-family: 'uxiconfont';
        src: url('uxiconfont.eot'); /* IE9*/
        src: url('uxiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('uxiconfont.woff') format('woff'), /* chrome、firefox */
             url('uxiconfont.ttf')  format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
             url('uxiconfont.svg#uxiconfont') format('svg'); /*  iOS 4.1- */
    }

    二、在應用icon font實現一淘首頁logo發現的問題。

（1）firefox和IE9不支持對icon font字體的跨域訪問。能夠將字體文件放到同域的服務器上或修改服務器配置，詳細見這裏。

（2）某些版本（16.0.912.75 m、15.0.874.106）的chrome，在搜索框得到焦點或在搜索框的菜單上滑動時，會產生遮蓋logo的現象，其它瀏覽器未見此現象。

這個與字體的寬度範圍設置有關，以前logo的寬度以下，注意紅框內虛線部分

修改後的寬度：

 

對字體修正後，新版的一淘logo字體沒有此現象產生。

    （3）有同事反饋，firefox沒法顯示logo。

通過排查發現，形成此問題的緣由是用戶的設置致使的。

 

    （4）XP上的safari在渲染icon font時，若是ttf文件缺失‘x’字符，會致使操做系統崩潰，形成藍屏的狀況。

 

      這個問題很奇怪，由於在xp上用safari打開ux.etao.com/fonts沒有這樣的問題。當使用包含全部ux.etao.com/fonts 的圖標的字體文件時，也沒有出現這種狀況，但僅使用一淘logo相關的字體文件時就會出問題。經過對比測試，發現若是ttf字體文件缺乏「0078」 （unicode編碼，字符x），就會致使這種現象。以下圖所示：

 

此外，從Font Squirrel下載了幾種字體，對比測試結論和上面一致：若是使用的ttf字體文件缺乏「0078」（unicode編碼，字符x），XP上的safari會致使操做系統崩潰。所以在使用icon font時，要確保ttf字體文件含有「0078」。

（5）IE9 不支持將@font-face放到media query裏。這裏有對@font-face比較詳細的測試狀況。