2014-04-11 58 views
4

當我將應用程序放在IIS7服務器上時,FontAwesome不適用於我。當由IIS提供服務時,Fontawesome不起作用

在Firefox中,請求的URL編碼爲http://l2etest.kema.intra/fonts/fontawesome-webfont.ttf%3Fv=4.0.3,我得到404。當我將%3F更改爲?時,一切正常。

同樣的事情發生在IE中,但請求去了eot字體。

這是我在CSS(同FontAwesome頁):

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../fonts/fontawesome-webfont.eot?'); 
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

我認爲問題是,IIS編碼URL和而不是請求../fonts/fontawesome-webfont.eot?的請求轉到../fonts/fontawesome-webfont.eot%3F

請不要刪除'?'或'#'來自URL。他們故意在那裏,而且是必不可少的。問題是如何使IIS不以這種方式編碼URL。任何線索將不勝感激。

編輯: Btw。上述情況發生時,在web.config中我設置requestValidationMode和requestPathInvalidCharacters:

<httpRuntime shutdownTimeout="360" maxRequestLength="102400" enable="true" requestValidationMode="2.0" requestPathInvalidCharacters="" /> 

沒有它,我得到400(錯誤請求):(?) 從客戶端檢測到有潛在危險的Request的值

如何修復IIS以正確提供字體?

EDIT2OK,我發現這個問題的原因。用於MVC3的SquishIt捆綁工具正在改變這些角色。當我從包中排除font-awesome.css時,一切正常。

+0

您是否爲iis中的字體設置了您的MIME類型? – Pete

+0

是設置了MIME類型。這是人們一直提到的唯一的東西。當提供正確的URL(?而不是%3F)時提供字體 –

+0

如果您找到了解決方案,請回答您自己的問題,因爲它將來可能會作爲其他人的資源。 – nickhar

回答

3

SquishIt捆綁爲MVC3工具編碼URL的字體路徑中,所以../fonts/fontawesome-webfont.eot?在CSS文件改爲../fonts/fontawesome-webfont.eot%3F 。這通常會返回400,因爲%3F被認爲是不安全的。如果設置requestPathInvalidCharacters=""然後%3F被認爲是安全的,但顯然沒有文件``../字體/ fontawesome-webfont.eot%3F`,因此404

我刪除fontawesome.css從包和一切工作正常。

19

Why is @font-face throwing a 404 error on woff files?

添加的MIME類型的web配置

<system.webServer> 
    <staticContent> 
     <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type --> 
     <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> 
    </staticContent>  
    </system.webServer> 
1

使用IIS服務器是有風險的,而不是我嘗試的另一個技巧是100%的成功。

步驟1

通過在文件的結尾處添加.JPG重命名字體文件名。

fontawesome-webfont.eot。JPG(同樣)

然後更改fontawesome.css字體文件類型渲染線

*/@font-face{font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot.jpg?v=4.0.3'); src:url('../fonts/fontawesome-webfont.eot.jpg?#iefix&v=4.0.3') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff.jpg?v=4.0.3') format('woff'),url('../fonts/fontawesome-webfont.ttf.jpg?v=4.0.3') format('truetype'),url('../fonts/fontawesome-webfont.svg.jpg?v=4.0.3#fontawesomeregular') format('svg'); 
+5

配置IIS做它應該沒有風險,這是常識......雖然提供字體爲jpg是非常不直觀的,並會產生問題,例如當你以後決定更新字體真棒。 – dancek

4

您可以打開IIS,指向你的網站,在IIS會議,選擇MIME類型。 後MIME類型視圖顯示,請點擊添加 - > 在對話框:

  • 文件擴展名:.woff
  • MIME類型:應用程序/ x-字體WOFF

點擊確定。

完成。

2

此答案不適用於上述問題但對於那些面臨類似錯誤但由於不同原因而落入此線程的人。

我面臨類似的問題,但後來發現IIS試圖尋找文件夾MyIpAddress/fonts/fontawesome-webfont.woof中的字體真棒woff,eot文件,但我有文件在不同的文件夾中。移動fontawesome-webfont.eot, fontawesome-webfont.svg,fontawesome-webfont.ttf, fontawesome-webfont.woff到我的字體文件夾解決我的問題

+0

這對我有用。我在嵌套的路徑中使用了font-awesome。它似乎預計將在/ html-root/font-awesome / – fragmint

2

,我只需要添加引導CDN鏈接解決問題

爲您的網頁:

<head> 
... 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
... 
</head> 
1

如果你正在使用IIS7下笨:

在你的web.config文件中,添加woff模式

<rule name="Rewrite CI Index"> <match url=".*" /> <conditions> <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" /> </conditions> <action type="Rewrite" url="index.php/{R:0}" /> </rule>

希望它有幫助!

0

我從woff2更改爲woff,它很好。

相關問題