当由IIS提供服务时,Fontawesome不起作用

时间:2014-04-11 08:21:17

标签: css iis iis-7 fonts font-awesome

当我将我的应用程序放在IIS7服务器上时,FontAwesome对我不起作用。

在Firefox中,请求的网址编码为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会对网址进行编码,而不是请求../fonts/fontawesome-webfont.eot?请求转到../fonts/fontawesome-webfont.eot%3F

请不要建议删除'?'或来自网址的“#”。他们是有目的的,是必不可少的。问题是如何使IIS不以这种方式编码URL。任何线索都将受到赞赏。

修改: 顺便说一句。上面的情况发生在web.config中我设置requestValidationMode和requestPathInvalidCharacters:

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

没有它我得到400(错误请求): 从客户端(?)

检测到潜在危险的Request.Path值

如何修复IIS以正确提供字体?

EDIT2 好的,我找到了问题的原因。用于MVC3的SquishIt捆绑工具正在改变这些角色。当我从包中排除font-awesome.css时,一切正常。

10 个答案:

答案 0 :(得分:20)

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

网络配置中添加MIME类型:

  <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 :(得分:7)

您可以打开IIS,指向您的网站,在 IIS会话中,选择 MIME类型。 显示Mime类型视图后,单击添加 - &gt; 在对话框中:

  • 文件扩展名: .woff
  • MiME类型: application / x-font-woff

单击“确定”。

完成。

答案 2 :(得分:4)

这个答案不适用于上述问题但是对于那些面临类似错误但由于不同原因而陷入此问题的人。

我遇到了类似的问题,但后来发现IIS正试图在文件夹MyIpAddress/fonts/fontawesome-webfont.woof中查找字体真棒woff,eot文件,但我将文件放在不同的文件夹中。将fontawesome-webfont.eot, fontawesome-webfont.svg,fontawesome-webfont.ttf, fontawesome-webfont.woff移动到我的字体文件夹中解决了我的问题

答案 3 :(得分:3)

用于MVC3的SquishIt捆绑工具是对字体路径进行url编码,因此css文件中的../fonts/fontawesome-webfont.eot?已更改为../fonts/fontawesome-webfont.eot%3F。这通常会返回400,因为%3F被认为是不安全的。如果你设置requestPathInvalidCharacters=""那么%3F被认为是安全的,但显然没有文件``../ fonts / fontawesome-webfont.eot%3F`,因此404。

我从包中删除了fontawesome.css,一切正常。

答案 4 :(得分:3)

对我来说只添加bootstrap CDN链接解决了问题

页面:

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

答案 5 :(得分:2)

使用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');

答案 6 :(得分:1)

如果您在IIS7下使用CodeIgniter:

在您的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>

希望它有所帮助!

答案 7 :(得分:0)

我从woff2改为woff,它继续进展顺利。

答案 8 :(得分:0)

如果通过捆绑添加FontAwesome,则它可能会抛出woff2网址。请在类似的线程上使用以下解决方案,其中CssRewriteUrlTransform用于重做url: https://stackoverflow.com/a/22700610/746984

答案 9 :(得分:-1)

在您的index.html页面中使用此CDN ...

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">