首頁 > php教程 > PHP开发 > 網站發佈後Bootstrap框架引用woff字體無法正常顯示的解決方法

網站發佈後Bootstrap框架引用woff字體無法正常顯示的解決方法

高洛峰
發布: 2016-12-05 14:02:37
原創
2554 人瀏覽過

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


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板