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

Question

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)

此文件存在于解决方案资源管理器的字体目录中。构建操作设置为 "Content"，复制到输出目录设置为 "Do not copy like in other font files"。 Bootstrap 3 使用 NuGet 添加到解决方案中。如何解决此问题以免发生此错误？应用程序正确显示 Glyphicon 和 FontAwesome 图标。此错误总是在应用程序启动时发生。

Answer 1

出现这个问题是因为 IIS 不知道 woff 和 woff2 文件 MIME 类型。

解决方案一：

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

方案二：

在 IIS 项目页面上：

第 1 步： 转到您的项目 IIS 主页并双击 MIME Types 按钮：

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

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

Answer 6

出现这个问题是因为 IIS 没有找到 woff2 文件 mime 类型的 actual location。正确设置字体的 URL，同时在 CSS 文件中将字体系列保持为 glyphicons-halflings-regular，如下所示。

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

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

How to remove error about glyphicons-halflings-regular.woff2 not found

asp.net-mvc

visual-studio

asp.net-mvc-4

twitter-bootstrap

glyphicons