開發筆記 - 解決font-awesome等圖標在瀏覽器中的兼容問題

今天在寫前端頁面的時候，以爲font-awesome簡單實用就上手試了一下，由於font-awesome圖標庫甚爲強大，我就在其css上多作了一些嘗試，這一嘗試發現了一個致命的問題，當我對i標籤進行統一字體大小以及統一字體樣式的時候，發現了個人網頁在不一樣瀏覽器上的顯示問題，顯示以下：

 

QQ瀏覽器：

圖標顯示正常！

 

谷歌瀏覽器：

圖標顯示異常！

 

IE瀏覽器

 

圖標顯示異常

 

百思不得其解，後來搜了一下這個問題，本身也在這總結一下，防止一個坑掉下去兩次：

查資料得知「谷歌瀏覽器和IE9不支持對icon font字體的跨域訪問」，須要在圖標字體文件所在服務器配置Header參數「Access-Control-Allow-Origin」容許當前域名才能夠。並且，通過驗證，必須將參數「Access-Control-Allow-Origin」配置爲「*」才能夠，配置爲「*.當前域名」並不能夠，不知道啥緣由。此處@陳 晨 https://www.cnblogs.com/freshman0216/p/3825166.html 個人這篇文章至關於一個事例了吧，哈哈。

 

原來是瀏覽器的資源跨域請求問題

如今主流瀏覽器（包括IE6）都支持CSS3的自定義字體(@font-face)，所以能夠嘗試使用font來替換圖片展現網站的各類icon。這樣好處由於是矢量，放大不失真，體積小，缺點也很明顯，就是同一時刻字體只能是單色。若是你想使用font-awesome來拓展圖標的話，在設置其CSS樣式時就要注意@font-face字體定義的問題了。

      功能實現後，在QQ瀏覽器上展現好好的（左下圖），但到了谷歌或IE或其它瀏覽器上圖標字體卻不顯示了（右下圖）。經過谷歌瀏覽器的控制檯發現以下報錯「已 阻止交叉源請求：同源策略不容許讀取 。

 

因此我在沒有網絡管理員的狀況下偷了個懶，乾脆將我自定義的i標籤字體去除，問題獲得瞭解決！

以下圖所示：

若是大家也遇到了這個問題的話，若是項目需求對字體沒有特殊要求的話就去掉吧！