昨天在開發前端頁面時遇到了Bootstrap架構所引用的.woff字型矢量圖示無法正常顯示的問題:
檢查了路徑,發現路徑都是正确的:
于是在網上搜尋了一下,發現很可能是伺服器上IIS沒有添加.woff字型矢量圖示的MIME類型,導緻發送HTTP請求時,IIS無法處理和識别此類型的檔案。但是嘗試了網上的很多方法,遇到了很多坑之後才把問題解決。現在記錄下整個過程,希望可以幫到别人少走彎路。
解決方法如下:
1.開啟IIS服務
首先依次打開“開始”–>”控制台”:
然後進入”程式”:
再點選”打開或關閉Windows功能”:
這時會彈出新的視窗,等待加載完成後就會看到下面這個頁面:
将”Internet服務資訊”裡的勾全打上,就像這樣:
點選”确定”後,在”開始”–>”管理工具”中就可以檢視到IIS管理器:
到這裡,就開啟了IIS資訊管理服務,接着進入下一步。
2.設定”MIME類型”,讓IIS識别.woff,.woff2檔案格式
接着上一步的操作,點選進入”Internet資訊服務(IIS)管理器”,會進入下面這個視窗:
找到”MIME類型”:
輕按兩下後會看到設定視窗:
在空白區域點選右鍵,選擇”添加”就會彈出這個視窗:
最後将下面的内容對應輸入:
.woff
application/x-font-woff
.woff
2
application/x-font-woff
添加成功後,IIS就可以識别.woff和.woff2格式檔案了,但是要想在網頁上正确顯示,還需要最後一步。
3.設定MyEclipse中項目目錄下的”web.xml”檔案
打開項目的”web.xml”檔案,添加下面的代碼:
servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.woff</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.woff2</url-pattern>
</servlet-mapping>
最後重新加載頁面,就會看到字型圖示可以正常顯示:
到此問題成功解決!