修復WordPress插件WP-Zan的圖標字體顯示錯誤問題

編輯：狂族晨曦 來源：WordPress技巧 日期：2016-03-13 閱讀： 2,727 次 搶個沙發 百度已收錄

關于給文章點贊的功能，先森一直用的是WP-Zan插件。不知道其他使用該插件的網站是否出現了和先森一樣的情況：點贊的那個圖標字體的上半截一直是被擋住了的狀態。

WP-Zan插件圖標字體顯示不正確

這讓先森很郁悶，最初還以為是CSS的設置問題。但是先森鼓搗了半天，發現通過CSS無法修復該問題。后來看別的網站的圖標是正確的，就直接把字體代碼復制過來，結果發現這樣沒有顯示。然后發現，是別的網站使用的圖標字體和WP-Zan插件的不一樣。

發現字體不一樣先森才想到，是不是插件自己的字體有問題？

趕緊從服務器把插件的字體文件下載下來。路徑很簡單，就是/wp-content/plugins/wp-zan/static/fonts里面。下載下來，打開一看，果然有問題。

這里先森用了字體編輯軟件FontCreator_CHS_7.5，非常好用，但是需要破解。先森記得之前是破解了的，不知道怎么回事現在又失效了，導致先森保存一次之后就不能保存了。有興趣的可以去百度下載：

FontCreator_CHS_7.5

先森打開的是ttf文件，進行編輯。打開就發現了問題所在：

WP-Zan插件的問題原因

點擊上圖可以放大。放大后可以看到，兩個圖標都有一點點被擋住了，這一點點，就是導致問題出現的原因。選中其中一個右鍵-“編輯”，即可進入編輯界面：

FontCreator_CHS_7.5字體編輯

圈選整個圖標，將其整體往下移動，在最終顯示上面讓其不被擋著即可。當然，最好還是居中。

FontCreator_CHS_7.5-調整-保存

這個保存，只能保存出otf和wotf格式的字體文件，而插件中需要的，是.ttf .woff .eot .svg四中文件，這時候就可以使用一個國外的字體在線轉換網站了：

字體在線轉換

點擊上面的選擇文件，選好文件點擊下面的“CONVERT & DOWNLOAD”,點擊之后可能需要等10秒鐘，就會跳出一個下載對話框。下載的壓縮包內，就是已經轉換好了的4個文件。

• 字體在線轉化：FONT2WEB

接下來只需要將這4個文件上傳到服務器，替換原文件即可了。

修改后的效果 ↓↓↓ 點擊下方查看