解決Web部署 svg/woff/woff2字型 404錯誤

標籤：操作   控制   opera   font   不包含   查看   iis   功能   屬性   

網站發布到IIS後，發現網站使用的Bootstrap架構所引用的woff字型無法正常顯示。於是跟蹤http請求，發現woff字型請求出現GET .woff 404 (Not Found)的問題，但是項目中woff字型的檔案並未丟失。後經排查，原來是伺服器上IIS沒有添加woff字型的MIME類型，導致發送HTTP請求時，IIS無法處理和識別此類型的檔案。

解決方案1：在Web.config設定檔中添加woff字型的MIME類型 

解放方法2：在IIS中添加woff字型的MIME類型 
woff字型簡介 
MIME類型簡介 

解決方案一：在Web.config設定檔中添加woff字型的MIME類型

如果網站是使用ASP.NET 或者ASP.NET MVC 編寫的，可以很方便的直接使用設定檔進行woff字型的配置。只要在Web.config中的system.webServer節點添加下面的配置可以了。

 <system.webServer>  <staticContent>  <remove fileExtension=".woff" />  <mimeMap fileExtension=".woff" mimeType="font/x-font-woff" />   </staticContent> </system.webServer>

這裡要注意下的是這個配置，添加此節點是防止出現這個錯誤：“在唯一密鑰屬性“fileExtension”設定為“.woff”時，無法添加類型為“mimeMap”的重複集合項目”，這個問題可以點擊此連結查看解決方案。如果只添加下面的這個節點，而且沒有報這個錯誤的話，remove節點可以不用添加。另外”font/x-font-woff”是woff字型的MIME類型值。

將該節點添加到網站的設定檔後，在重新開啟網站即可正常顯示woff字型。此方法可用於沒有許可權操作IIS管理器的時候作為解決方案。

解放方案二：在IIS中添加woff字型的MIME類型

如果可以直接操作IIS管理器的話，也可以直接在IIS上添加woff字型的mime type。只要開啟當前的IIS，開啟MIME類型的配置，最後添加一個新的MIME類型就可以了，這裡woff字型的副檔名是.woff, MIME類型為：”font/x-font-woff“。具體操作如下所示：

開啟控制台中的IIS管理器，選擇當前IIS，開啟MIME類型配置；

在IIS中添加.woff；

點擊MIME類型右邊操作的欄的添加功能；

添加.woff的MIME類型；

彈出的添加MIME類型對話方塊中，副檔名填寫.woff，MIME類型可填寫 font/x-font-woff 或者application/x-font-woff；

設定副檔名和類型；

點擊確定後成功添加了.woff副檔名的MIMI TYPE，現在開啟網站請求WOFF字型就不會出現404 NOT FOUND錯誤了。

woff字型簡介

Web開放字型格式（Web Open Font Format，簡稱WOFF） 是一種網頁所採用的字型格式標準。此字型格式發展於2009年，現在正由全球資訊網同盟Web字型工作小組標準化，以求成為推薦標準。此字型格式不但能夠有效利用壓縮來減少檔案大小，並且不包含加密也不受DRM（數位著作權管理）限制。

在2010年4月8日，Mozilla基金會、Opera軟體公司和微軟提交WOFF之後，全球資訊網聯盟發表評論指，希望WOFF不久能成為所有瀏覽器都支援的、“單一、可互操作的(字型)格式”。[6]2010年7月27日，全球資訊網聯盟將WOFF作為工作草案發布。

WOFF的MIME類型是：application/x-font-woff（font/x-font-woff也可以），目前的IIS7裡面預設沒有這個MIME類型，如果要讓網站支援這個，請在IIS7裡面的MIME類型裡面添加woff。

MIME類型簡介

MIME(Multipurpose Internet Mail Extensions)多用途互連網郵件擴充類型，既設定某種副檔名的檔案用一種應用程式來開啟的方式類型，當該副檔名檔案被訪問的時候，瀏覽器會自動使用指定應用程式來開啟。多用於指定一些用戶端自訂的檔案名稱，以及一些媒體檔案開啟檔案。

副檔名      MIME類型　

.svg             image/svg+xmz

?.woff            application/x-font-woff

?.woff2          application/x-font-woff

解決Web部署 svg/woff/woff2字型 404錯誤