DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 網站發布後Bootstrap框架引用woff字體無法正常顯示的解決方法
網站發布後Bootstrap框架引用woff字體無法正常顯示的解決方法
編輯:關於JavaScript     

網站發布到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)多用途互聯網郵件擴展類型,既設定某種擴展名的文件用一種應用程序來打開的方式類型,當該擴展名文件被訪問的時候,浏覽器會自動使用指定應用程序來打開。多用於指定一些客戶端自定義的文件名,以及一些媒體文件打開方式。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved