網(wǎng)站發(fā)布后Bootstrap框架引用woff字體無法正常顯示的解決方法
網(wǎng)站發(fā)布到IIS后，發(fā)現(xiàn)網(wǎng)站使用的Bootstrap框架所引用的woff字體無法正常顯示。于是跟蹤http請求，發(fā)現(xiàn)woff字體請求出現(xiàn)GET .woff 404 (Not Found)的問題，但是項目中woff字體的文件并未丟失。后經(jīng)排查，原來是服務器上IIS沒有添加woff字體的MIME類型，導致發(fā)送HTTP請求時，IIS無法處理和識別此類型的文件。
解決方法1：在Web.config配置文件中添加woff字體的MIME類型
解放方法2：在IIS中添加woff字體的MIME類型
woff字體簡介
MIME類型簡介
解決方法一：在Web.config配置文件中添加woff字體的MIME類型
如果網(wǎng)站是使用ASP.NET 或者ASP.NET MVC 編寫的，可以很方便的直接使用配置文件進行woff字體的配置。只要在Web.config中的system.webServer節(jié)點添加下面的配置可以了。
<system.webServer> <staticContent> <remove fileExtension=".woff" /> <mimeMap fileExtension=".woff" mimeType="font/x-font-woff" /> </staticContent> </system.webServer>
這里要注意下的是這個配置，添加此節(jié)點是防止出現(xiàn)這個錯誤：“在唯一密鑰屬性“fileExtension”設置為“.woff”時，無法添加類型為“mimeMap”的重復集合項”，這個問題可以點擊此鏈接查看解決方法。如果只添加下面的這個節(jié)點，而且沒有報這個錯誤的話，remove節(jié)點可以不用添加。另外”font/x-font-woff”是woff字體的MIME類型值。
將該節(jié)點添加到網(wǎng)站的配置文件后，在重新打開網(wǎng)站即可正常顯示woff字體。此方法可用于沒有權(quán)限操作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，現(xiàn)在打開網(wǎng)站請求WOFF字體就不會出現(xiàn)404 NOT FOUND錯誤了。
woff字體簡介
Web開放字體格式（Web Open Font Format，簡稱WOFF） 是一種網(wǎng)頁所采用的字體格式標準。此字體格式發(fā)展于2009年，現(xiàn)在正由萬維網(wǎng)聯(lián)盟的Web字體工作小組標準化，以求成為推薦標準。此字體格式不但能夠有效利用壓縮來減少檔案大小，并且不包含加密也不受DRM（數(shù)位著作權(quán)管理）限制。
在2010年4月8日，Mozilla基金會、Opera軟件公司和微軟提交WOFF之后，萬維網(wǎng)聯(lián)盟發(fā)表評論指，希望WOFF不久能成為所有瀏覽器都支持的、“單一、可互操作的(字體)格式”。[6]2010年7月27日，萬維網(wǎng)聯(lián)盟將WOFF作為工作草案發(fā)布。
WOFF的MIME類型是：application/x-font-woff（font/x-font-woff也可以），目前的IIS7里面默認沒有這個MIME類型，如果要讓網(wǎng)站支持這個，請在IIS7里面的MIME類型里面添加woff。
MIME類型簡介
MIME(Multipurpose Internet Mail Extensions)多用途互聯(lián)網(wǎng)郵件擴展類型，既設定某種擴展名的文件用一種應用程序來打開的方式類型，當該擴展名文件被訪問的時候，瀏覽器會自動使用指定應用程序來打開。多用于指定一些客戶端自定義的文件名，以及一些媒體文件打開方式。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js控制背景不重復的代碼2009-03-03
d3.js中冷門卻實用的內(nèi)置函數(shù)總結(jié)
D3.js是一個JavaScript庫，它可以通過數(shù)據(jù)來操作文檔。D3可以通過使用HTML、SVG和CSS把數(shù)據(jù)鮮活形象地展現(xiàn)出來。d3.js其實提供了很多內(nèi)置的函數(shù)，可以卻被大家忽略了，下面這篇文章就來給大家詳細介紹了d3.js中冷門卻實用的一些內(nèi)置函數(shù),需要的朋友可以參考借鑒。2017-02-02
JavaScript下通過的XMLHttpRequest發(fā)送請求的代碼
JavaScript下通過的XMLHttpRequest發(fā)送請求的代碼，需要的朋友可以參考下。2011-06-06
uniapp實現(xiàn)h5、app與微信小程序三端pdf文件下載和預覽功能
作為使用uni-app的小白來說,嘗試了好幾種方法,終于得到了我想要的效果,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)h5、app與微信小程序三端pdf文件下載和預覽功能的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了如何利用JavaScript實現(xiàn)開心消消樂小游戲,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
Echarts圖表點擊x軸y軸切換圖表二級數(shù)據(jù)實例代碼
最近項目用到了Echarts圖進行數(shù)據(jù)展示,所以下面這篇文章主要給大家介紹了關(guān)于Echarts圖表點擊x軸y軸切換圖表二級數(shù)據(jù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了javascript中加號(+)操作符的一些神奇作用,真的很神奇,例如加號可以轉(zhuǎn)換數(shù)據(jù)類型，可以把日期轉(zhuǎn)成整數(shù)等,需要的朋友可以參考下2014-06-06
"js 合并對象"是一種在JavaScript編程中常見的操作,用于將多個對象的屬性合并到一起,通常,我們會使用ES6的擴展運算符或者Object.assign()函數(shù)來實現(xiàn)這個功能,感興趣的可以了解一下2023-08-08
ES6提供了大量新的好的東西，在過去的一年內(nèi)，瀏覽器提供商做了大量的辛勤工作將新的語言特性更新到他們的瀏覽器中。盡管有重大的更新，很多小的語言更新另我眼前一亮，下面這篇文章主要介紹了關(guān)于ES6的六個小特性,需要的朋友可以參考下。2017-02-02
讓插入到 innerHTML 中的 script 跑起來的實現(xiàn)代碼
在做 ajax 編程時，我們常常需要將 xmlhttp 獲取到的頁面內(nèi)容通過 innerHTML 來賦給某個容器（比如 div、span 或者 td 等），但是這里存在一個問題，就是我們將要賦給 innerHTML 的頁面內(nèi)容如果包含有腳本程序，這些腳本程序不管是外部腳本，還是內(nèi)部腳本，可能(1)都不會被執(zhí)行。2006-07-07