Hui-iconfont字元圖示不顯示或顯示異常。

近期在做項目時發現Hui-iconfont字元圖示，感覺很友善，并且占用空間小，加載快等有點。就決定采用了。

可是在加載圖示時通過背景動态加載時顯示總是異常。如下圖

這個問題困擾了我挺久的。最後終于找到解決辦法

解決辦法：在你的jsp頁面加上字型庫的全路徑。

如下：

<style type="text/css">
 @font-face {font-family: "Hui-iconfont";
  src: url('${pageContext.request.contextPath }/lib/Hui-iconfont/1.0.8/iconfont.eot'); /* IE9*/
  src: url('${pageContext.request.contextPath }/lib/Hui-iconfont/1.0.8/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('${pageContext.request.contextPath }/lib/Hui-iconfont/1.0.8/iconfont.woff') format('woff'), /* chrome、firefox */
  url('${pageContext.request.contextPath }/lib/Hui-iconfont/1.0.8/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('${pageContext.request.contextPath }/lib/Hui-iconfont/1.0.8/iconfont.svg#Hui-iconfont') format('svg'); /* iOS 4.1- */
} 
</style>
           

然後解決問題。

分析一下。應該是在原來的iconfont.css裡的

@font-face {font-family: "Hui-iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome、firefox */
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('iconfont.svg#Hui-iconfont') format('svg'); /* iOS 4.1- */
}

           

路徑加載失敗導緻的。是以要寫全路徑即可。

備注：我試着在iconfont.css裡加全路徑，發現解決依舊顯示異常。原因我還沒找到，如果你找到原因，請告知我，多謝。