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

無法正常顯示的原因

靜態(tài)文件跨域

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

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

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

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

服務(wù)器未添加MIME類型

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

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

css編碼的問題

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

解決辦法

跨域問題

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

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

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

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

阿里云進(jìn)入CDN域名管理，選擇對應(yīng)域名點(diǎn)擊管理，進(jìn)入緩存配置>HTTP頭>添加，如圖：

https與http問題

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

添加MIME映射

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

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

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

css編碼的問題

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