解決firefox和IE9對icon font字型的跨域訪問問題，ie9icon

解決firefox和IE9對icon font字型的跨域訪問問題，ie9icon

      何為跨域訪問，為什麼會有跨域限制？一切還得從瀏覽器的同源策略說起。

      同源策略：是瀏覽器最核心也是最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能會受到影響，可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

      瀏覽器的同源策略：限制了來自不同源的“document”或指令碼，對當前“document”讀取或設定某些屬性。同源策略的存在，限制了“源”自A的指令碼只能操作“同源”頁面的DOM，“跨源”操作來源於B的頁面將會被拒絕。

      何為同源呢？“img.company.com”和"agent.company.com"算不算是同源呢？相當長的時間我都認為這兩個域都是"company.com"的子域，算是同源的，這想法實際上是錯的。

      同源：同主機（網域名稱、子域或者IP地址相同）、同連接埠號碼、同協議。

URL	是否同源	原因
http://agent.soufun.com/dir1/a.aspx	是
http://agent.soufun.com/dir2/a.aspx	是
https://agent.soufun.com/secure.htm	否	協議不同
http://agent.soufun.com:81/dir2/a.aspx	否	連接埠不同
http://img.soufun.com/dir/a.jpg	否	子域不同

 

      表徵圖字型：現在主流瀏覽器（包括IE6）都支援CSS3的自訂字型(@font-face)，因此可以嘗試使用font來替換圖片展示網站的各種icon。這樣好處因為是向量，放大不失真，體積小，缺點也很明顯，就是同一時刻字型只能是單色。

      功能實現後，在IE上展示好好的（左），但到了Firefox標字型卻不顯示了（右）。通過FirefoxFirebug的控制台發現如下報錯“已 阻止交叉源請求：同源策略不允許讀取 http://img.company.com/secondhouse/image/magentnew/styles/fonts20140704/icomoon.woff?ivldoa 上的遠端資源。可以將資源移動到相同的網域名稱上或者啟用 CORS 來解決這個問題。”

             

      為什麼IE和Firefox下顯示不一樣呢？查資料得知“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的強大的功能。

 

怎在網頁css使用icon font？詳細指導，不要發連結呀，中文教程百分之八十全抄的老外的還不詳細

<style>@font-face { font-family: 'iconfont-10'; src:url('at.alicdn.com/t/font_1401158182_6869004.eot'); /* IE9 */ src:url('at.alicdn.com/t/font_1401158182_6869004.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('at.alicdn.com/t/font_1401158182_6869004.woff') format('woff'), /* chrome、firefox */ url('at.alicdn.com/t/font_1401158182_6869004.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ url('at.alicdn.com/...onfont') format('svg'); /* iOS 4.1- */}.iconfont {-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale;}.iconfont-10 {font-family:'iconfont-10' !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smo...
 
改變ExtJs預設的字型大小的幾種方法

1、只需把ext-all.css樣式檔案中的所有11px換成12px，這樣就為統一的12px的字型了。但是如果再想增大,那麼這時候不光是把源檔案的11px換成15px，而且需要把裡面和font有關的12px換成15px。改完之後按鈕出現毛邊,在樣式檔案中加.ext-ie .x-btn-text-icon .x-btn-center .x-btn-text {padding:3px 0px 0px 0px;}毛邊就不見了!2、由於在不同瀏覽器中，或者不同版本的同款瀏覽器中顯示的Extjs字型大小不一樣。而且看起來比較小。不順眼。在網上查之，獲得一條有用資訊：Extjs 在很多情況下使用 11px 字型，11px 大小是一種邊緣字型，不同的瀏覽器對 11px的渲染各不相同，IE 的渲染和12px 相似，而在 Firefox 中，則和 10px相似，導致字型在FF中過小的問題。為了能夠徹底的解決字型大小問題，直接開啟ext-all.css，尋找所有的11px並替換為12px。問題解決了3、Extjs版本3.2.1，字型大小修改上網找了好多資料，都說是加上.x-btn-text{font-size:15px;}這樣就好了，但是在IE9和FF下還是不好用。後來到ext-all.css裡慢慢試，才找到設定的地方。