logo标签列表

Fontawesome在IIS服务中无法工作

cssiisiis-7fontsfont-awesome
8

当我将应用程序放在IIS7服务器上时，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进行编码。任何线索都将不胜感激。

编辑：顺便说一句，当我在web.config中设置requestValidationMode和requestPathInvalidCharacters时，上述情况发生。

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

如果没有它，我会得到400（错误请求）：客户端探测到潜在危险的 Request.Path 值。

我该如何修复IIS以正确提供字体？

编辑2： 好的，我找到了问题的原因。SquishIt MVC3打包工具更改了这些字符。当我从捆绑包中排除font-awesome.css时，一切正常。

你在IIS中设置了字体的MIME类型吗？ - Pete
是的，MIME 类型已设置。这是人们一直提到的唯一事情。当提供正确的 URL（而不是 %3F）时，字体将被提供。 - Michal B.
如果您已经找到了解决方案，那么请回答自己的问题，因为它有可能成为未来其他人的资源。 - nickhar
可能是重复的问题：为什么@font-face在woff文件上会抛出404错误？ - Brad
10个回答
21

为什么@font-face在woff文件上引发404错误？

在web config中添加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>
7

您可以打开 IIS，指向您的网站，在 IIS 会话 中选择 MIME 类型。

在显示 Mime 类型后，点击 添加 ->

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

点击 OK。

完成。

5
此答案不适用于上述问题，而是为了那些因其他原因遇到类似错误并进入此线程的人提供帮助。
我也遇到了类似的问题，但后来发现IIS试图在文件夹MyIpAddress/fonts/fontawesome-webfont.woof中查找font-awesome woff、eot文件，但我将这些文件放在了不同的文件夹中。将fontawesome-webfont.eot、fontawesome-webfont.svg、fontawesome-webfont.ttf、fontawesome-webfont.woff移动到我的字体文件夹中解决了我的问题。
这对我有用。我在嵌套路径中使用了font-awesome。似乎它期望在 /html-root/font-awesome/ 中。 - fragmint
这对我有用。我已经将字体文件夹移动到了我的 Visual Studio 项目根目录中。 - EduardoUstarez
3

对于我来说，只需要添加Bootstrap CDN链接就解决了这个问题。

对于您的页面：

<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>
3
SquishIt是MVC3的捆绑工具，它对字体路径进行了url编码，因此在css文件中，../fonts/fontawesome-webfont.eot?被改为../fonts/fontawesome-webfont.eot%3F。这通常会返回400错误，因为%3F被认为是不安全的。如果你设置requestPathInvalidCharacters=""，那么%3F就被认为是安全的，但显然没有文件名为“../fonts/fontawesome-webfont.eot%3F”，因此会返回404错误。
我从bundle中删除了fontawesome.css，现在一切都正常运行。
2

玩弄IIS服务器是有风险的，因此我尝试了另一个技巧，这个技巧百分之百成功。

步骤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');
7
将IIS配置为执行其应该执行的操作并不具有风险，这是常识。而将字体作为JPG文件提供非常不直观，会产生问题，例如当您决定更新Font Awesome时。 - StackExchange saddens dancek
1
如果您正在使用IIS7下的CodeIgniter：

在您的web.config文件中，将woff添加到pattern中。

<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
0
我从woff2改成了woff，一切都很顺利。
-1

在你的 index.html 页面中使用这个 CDN...

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
我不确定为什么这个答案会被踩，但它确实解决了我的问题。我的主机不允许我使用<system.WebServer>键。 - Overlord
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接