wordpress是全球範圍內使用較多的網站程式，字型圖示由於其輕量、靈活、清晰以及良好的瀏覽器相容性已經被廣泛用於web開發當中，不過在實際使用當中還是有部分使用者遇到了一些問題，最常見的問題就是圖示無法正常顯示。

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

WordPress主題內字型無法正常顯示的原因

靜態檔案跨域

由於字型檔案是不允許跨域的，如果網站對靜態檔案使用了CDN加速啟用了單獨的二級域名的話，那麼頁面在載入字型檔案的時候就會遇到字型跨域的問題。

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

https訪問下引用了http的靜態檔案

如果網站啟用了https的話，則需要使用https的靜態檔案（css、js、字型、圖片）。wordpress正常情況下會自動識別https協議並對css、js檔案自動替換成https，不過某些時候由於伺服器架構原因（比如反向代理）會有識別成http的情況出現。

伺服器未新增MIME型別

這個問題一般出現在windows伺服器IIS比較多，如果沒有新增MIME型別訪問字型檔案會報404的錯誤。

判斷是否是未新增MIME型別導致的問題可以使用Chrome瀏覽器訪問網站，滑鼠右鍵選單點選檢查調出開發者工具，然後在開發者工具選擇Network選項，再選擇Font，看下是否有紅色404狀態的字型檔案，如圖： 伺服器未新增MIME對映

css編碼的問題

如果css檔案編碼不對，也會導致字型圖示無法正常顯示，一般是顯示亂碼。

解決辦法

跨域問題

跨域問題可以透過新增Access-Control-Allow-Origin： *頭資訊來解決。

如果是使用了CDN，可以諮詢CDN服務商客服如何新增，根據我們瞭解的情況，簡單說下常用的CDN設定方法：

七牛看網上說是需要設定Referer 防盜鏈白名單，在白名單裡面新增網站的域名進去，不過實際測試還是需要在源站新增Access-Control-Allow-Origin： *頭資訊，然後清除七牛的CDN 快取。

騰訊雲進入CDN域名管理，點選需要配置的域名進入高階配置，點選新增HTTP Header，設定Access-Control-Allow-Origin，值為*，如圖：

阿里雲進入CDN域名管理，選擇對應域名點選管理，進入快取配置>HTTP頭>新增，如圖：

https與http問題

如網站啟用https，則需將所有靜態檔案全部修改成https即可，具體可以找下wordpress https配置相關教程。

新增MIME對映

伺服器需要新增以下格式的mime對映，前面是格式名，後面是mime型別：

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

具體新增方式的話，如果是虛擬主機可以找下主機後臺管理面板，一般是可以自己新增的，如果是iis伺服器。

css編碼的問題

這個問題可以聯絡開發人員處理。

注：本文轉載自網際網路 實際測試有效