天天看點

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

昨天在開發前端頁面時遇到了Bootstrap架構所引用的.woff字型矢量圖示無法正常顯示的問題:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

檢查了路徑,發現路徑都是正确的:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

于是在網上搜尋了一下,發現很可能是伺服器上IIS沒有添加.woff字型矢量圖示的MIME類型,導緻發送HTTP請求時,IIS無法處理和識别此類型的檔案。但是嘗試了網上的很多方法,遇到了很多坑之後才把問題解決。現在記錄下整個過程,希望可以幫到别人少走彎路。

解決方法如下:

1.開啟IIS服務

首先依次打開“開始”–>”控制台”:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

然後進入”程式”:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

再點選”打開或關閉Windows功能”:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

這時會彈出新的視窗,等待加載完成後就會看到下面這個頁面:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

将”Internet服務資訊”裡的勾全打上,就像這樣:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

點選”确定”後,在”開始”–>”管理工具”中就可以檢視到IIS管理器:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

到這裡,就開啟了IIS資訊管理服務,接着進入下一步。

2.設定”MIME類型”,讓IIS識别.woff,.woff2檔案格式

接着上一步的操作,點選進入”Internet資訊服務(IIS)管理器”,會進入下面這個視窗:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

找到”MIME類型”:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

輕按兩下後會看到設定視窗:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

在空白區域點選右鍵,選擇”添加”就會彈出這個視窗:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

最後将下面的内容對應輸入:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

.woff

application/x-font-woff

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.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>
           

最後重新加載頁面,就會看到字型圖示可以正常顯示:

Win7系統解決使用MyEclipse進行Web開發中網頁無法顯示.woff矢量圖示的問題

到此問題成功解決!