如何删除有关 glyphicons-halflings-regular.woff2 未找到的错误答案

【问题标题】：How to remove error about glyphicons-halflings-regular.woff2 not found如何删除有关 glyphicons-halflings-regular.woff2 未找到的错误
【发布时间】：2015-11-24 20:35:56
【问题描述】：

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)

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

【问题讨论】：

标签： asp.net-mvc twitter-bootstrap visual-studio asp.net-mvc-4 glyphicons

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

就我而言，我刚刚从这里直接下载了丢失的文件：https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

【讨论】：

为我解决了。谢谢。我下载了文件，并将字体文件夹保存在我的项目目录下。 “css”文件夹中的 CSS 文件，“fonts”文件夹中的字体
有时解决方案非常简单，我们不知道 :) 解决方案，我在我的 MVC5 应用程序的 fonts 文件夹中错过了这个

【解决方案3】：

对我来说，问题有两个：首先，我处理的 IIS 版本不知道.woff2 MIME 类型，只知道.woff。我修复了在服务器级别而不是 Web 应用级别使用 IIS 管理器的问题，因此该设置不会被每个新应用部署覆盖。（在 IIS 管理器下，我去了 MIME 类型，并添加了缺少的.woff2，然后更新了.woff。）

其次，更重要的是，我将bootstrap.css 与其他一些文件捆绑为"~/bundles/css/site"。同时，我的字体文件在"~/fonts"。 bootstrap.css 在"../fonts" 中查找字形字体，它转换为"~/bundles/fonts" -- 路径错误。

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

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

【讨论】：

【解决方案4】：

这个问题的发生是因为 IIS 不知道 woff 和 woff2 文件 mime 类型。

解决方案 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 步： 点击 Actions 菜单中的 Add 按钮：

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

【讨论】：

这为我解决了，但为什么呢？我希望能解释一下为什么该解决方案不仅仅是对提供的代码进行无意识的复制/粘贴。
@Bpainter 这个答案的第一行告诉你原因。 mime 类型与类型没有关联，因此浏览器无法加载它们。为什么浏览器不会加载未关联的 mime 类型文件？我认为这是一个单独的问题，我不知道答案。
@CamilleSévigny 我相信您的问题的答案是 IIS 仅提供有效的文件类型，因此由于它无法识别 .woff 和 .woff2 扩展名，因此它会使用 404 响应对这些文件的请求- 未找到。
@CamilleSévigny 谢谢，当我发表评论时，第一行不存在。它是在事后编辑的。没有你的评论，虽然我永远不会看到它。
在我的情况下，问题是我在引导程序和 Font-Awesome 捆绑中使用的 CssRewriteUrlTransform。如果您保留其正常的文件夹结构，则无需使用此选项。

【解决方案5】：

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

【讨论】：

【解决方案6】：

如果您只能访问 html，请将此添加到您的 html：

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

【讨论】：

谢谢，这个解决方案对我有用。但是，按照 stackoverflow.com/questions/46508793/… 在 web.config 中添加标记对我不起作用。