如何清除有关glyphicons-halflings-regular.woff2的错误

95

ASP.NET MVC4 Bootstrap 3应用程序正在从Microsoft Visual Studio Express 2013 for Web IDE运行。

Chrome控制台始终显示错误

http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

该文件位于解决方案资源管理器的fonts目录中。构建操作设置为“内容”，复制到输出目录为“请勿像在其他字体文件中一样进行复制”。使用NuGet将Bootstrap 3添加到解决方案中。如何解决此问题，以免发生此错误？应用程序正确显示Glyphicon和FontAwesome图标。该错误总是在应用程序启动时发生。

— 安德鲁斯
source

238

发生此问题的原因是IIS不了解文件mime类型woff和 woff2文件。

解决方案1：

将这些行添加到您的web.config项目中：

 <system.webServer>
  ...
  </modules>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>

解决方案2：

在IIS项目页面上：

步骤1：转到项目IIS主页，然后双击MIME Types按钮：

第2步：Add从Actions菜单中单击按钮：

步骤3：在屏幕中间出现一个窗口，在此窗口中，您需要添加解决方案1中的两行：

— 托佩罗
source

这为我解决了，但是为什么呢？我希望能得到一个解释，说明为什么该解决方案不仅可以随意复制/粘贴所提供的代码，而且还能发挥更大的作用。

— Bpainter

3

@Bpainter此答案的第一行告诉您原因。MIME类型未与类型相关联，因此它们无法由浏览器加载。浏览器为什么不加载未关联的mime类型文件？我认为这是一个单独的问题，我不知道答案。

— 卡米尔·塞维尼（CamilleSévigny），2015年

4

@CamilleSévigny我相信您的问题的答案是IIS仅提供可用的有效文件类型，因此，由于它无法识别.woff和.woff2扩展名，因此它以404（未找到）响应对这些文件的请求。

— Grungondola 2015年

@CamilleSévigny谢谢，当我发表评论时，第一行不在那。事实之后，它被编辑了。如果没有您的评论，我永远不会看到。

— Bpainter

就我而言，问题是我在引导程序和Font-Awesome捆绑包中使用的CssRewriteUrlTransform。如果保留其常规文件夹结构，则无需使用此选项。

— g_brahimaj '16

47

就我而言，我只是直接从此处下载缺少的文件：https : //gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

— 雷扎·马蒙（Reza Mamun）
source

7

为我解决了。谢谢。我下载了文件，并将fonts文件夹保存在我的项目目录下。“ css”文件夹中的CSS文件，“字体”文件夹中的字体

— CyprUS

1

有时解决方案非常简单，我们不知道fonts:) Thnx作为解决方案，我在我的MVC5应用程序的文件夹中错过了这一点

— Irf

6

如果您只能访问html，请将其添加到html中：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

— FMF
source

谢谢，这个解决方案对我有用。但是，在web.config中为每本加<staticContent>标签- stackoverflow.com/questions/46508793/... -没有为我工作。

— BUDDHIKA

5

对我来说，问题是双重的：首先，我要处理的IIS版本不知道.woff2MIME类型，只知道.woff。我修复了在服务器级别而不是Web应用程序级别使用IIS管理器的问题，因此该设置不会在每次新的应用程序部署中被覆盖。（在IIS管理器下，我转到MIME类型，并添加了missing .woff2，然后进行了更新.woff。）

其次，更重要的是，我将bootstrap.css其他文件与捆绑在一起"~/bundles/css/site"。同时，我的字体文件在中"~/fonts"。bootstrap.css寻找中的glyphicon字体"../fonts"，该字体翻译为"~/bundles/fonts"-错误的路径。

换句话说，我的捆绑包路径太深了。我将其重命名为"~/bundles/siteCss"，并更新了在项目中找到的所有对它的引用。现在，引导程序查找"~/fonts"了glyphicon文件，该文件有效。问题解决了。

在我上面固定的第二个问题，没有对的glyphicon字体文件是加载。症状是项目中所有glyphicon字形的实例都显示一个空框。但是，此症状仅出现在Web应用程序的已部署版本中，而不出现在我的开发机上。我仍然不确定为什么会这样。

— 斯蒂芬·G·塔吉
source

3

我尝试了上面的所有建议，但我的实际问题是我的应用程序正在app / fonts中查找/ font文件夹及其内容（.woff等），但是我的/ fonts文件夹与/ app位于同一级别。我将/ fonts移到/ app下，并且现在可以正常工作。我希望这可以帮助其他人在网上漫游以寻求答案。

— 圆弧
source

1

发生此问题的原因是IIS找不到woff2文件mime类型的实际位置。正确设置font-face的URL，并在CSS文件中将font-family保留为glyphicons-halflings-regular，如下所示。

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}

— 迪瓦斯·波德尔（Diwas Poudel）
source