字體圖標由于其輕量、靈活、清晰以及良好的瀏覽器兼容性已經被廣泛用于web開發(fā)當中，WPCOM線上的WordPress主題也都內置了字體圖標庫可供使用。不過在實際使用當中還是有部分用戶遇到了一些問題，最常見的問題就是圖標無法正常顯示。

無法正常顯示的原因

靜態(tài)文件跨域

由于字體文件是不允許跨域的，如果網站對靜態(tài)文件使用了CDN加速啟用了單獨的二級域名的話，那么頁面在加載字體文件的時候就會遇到字體跨域的問題。

判斷是否是字體跨域問題導致可以使用Chrome瀏覽器訪問網站，鼠標右鍵菜單點擊檢查調出開發(fā)者工具，然后在開發(fā)者工具選擇Console選項，觀察界面是否有Access-Control-Allow-Origin的紅色報錯提醒關鍵字。

https訪問下引用了http的靜態(tài)文件

如果網站啟用了https的話，則需要使用https的靜態(tài)文件（css、js、字體、圖片）。wordpress正常情況下會自動識別https協(xié)議并對css、js文件自動替換成https，不過某些時候由于服務器架構原因（比如反向代理）會有識別成http的情況出現。

服務器未添加MIME類型

這個問題一般出現在windows服務器IIS比較多，如果沒有添加MIME類型訪問字體文件會報404的錯誤。

判斷是否是未添加MIME類型導致的問題可以使用Chrome瀏覽器訪問網站，鼠標右鍵菜單點擊檢查調出開發(fā)者工具，然后在開發(fā)者工具選擇Network選項，再選擇Font，看下是否有紅色404狀態(tài)的字體文件，如圖： 服務器未添加MIME映射

css編碼的問題

如果css文件編碼不對，也會導致字體圖標無法正常顯示，一般是顯示亂碼。

解決辦法

跨域問題

跨域問題可以通過添加Access-Control-Allow-Origin: *頭信息來解決。

如果是使用了CDN，可以咨詢CDN服務商客服如何添加，根據我們了解的情況，簡單說下常用的CDN設置方法：

七牛看網上說是需要設置Referer 防盜鏈白名單，在白名單里面添加網站的域名進去，不過實際測試還是需要在源站添加Access-Control-Allow-Origin: *頭信息，然后清除七牛的CDN 緩存。

騰訊云進入CDN域名管理，點擊需要配置的域名進入高級配置，點擊添加HTTP Header，設置Access-Control-Allow-Origin，值為*,如圖： 騰訊云Access-Control-Allow-Origin

阿里云進入CDN域名管理，選擇對應域名點擊管理，進入緩存配置>HTTP頭>添加，如圖： 阿里云Access-Control-Allow-Origin

https與http問題

如網站啟用https，則需將所有靜態(tài)文件全部修改成https即可，具體可以找下wordpress https配置相關教程。

添加MIME映射

服務器需要添加以下格式的mime映射，前面是格式名，后面是mime類型：

.svg             image/svg+xml
.woff            application/x-font-woff
.woff2         application/x-font-woff

具體添加方式的話，如果是虛擬主機可以找下主機后臺管理面板，一般是可以自己添加的，如果是iis服務器，可以參考下圖： 添加MIME映射

css編碼的問題

這個問題可以聯(lián)系開發(fā)人員處理，目前我們的最新版付費wordpress主題暫不存在此問題。