glyphicons-halflings-regular.woff2 未加载 404 错误答案

【问题标题】：glyphicons-halflings-regular.woff2 not loading 404 errorglyphicons-halflings-regular.woff2 未加载 404 错误
【发布时间】：2015-07-29 03:06:20
【问题描述】：

我已经尝试了很多，也看到了很多答案，但没有一个能帮助我。我不确定为什么 glyphicons-halflings-regular.woff2 即使我有最新的引导版本也无法加载。

Bootstrap 3 unable to display glyphicon properly

目录结构

错误

css 中的@font-face 规则

   @font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

【问题讨论】：

你的@font-face 规则是什么？如果你直接在浏览器中输入它们的 URL 来下载它们，你能看到你的字体吗？另请注意 WOFF2 isn't very widely supported yet（相对于 .WOFF，pretty much everything 支持）
@Mike'Pomax'Kamermans 不，如果我在浏览器中输入他们的 URL，我将无法下载它们，并且我添加了字体规则，它与引导程序完全相同，前提是没有对 css 进行任何更改已制作。我无法理解为什么会发生这种情况
字体版本太多了。如果您绝对必须支持古老的 IE 版本，那么 WOFF 就可以了，使用 .eot。话虽如此，您能否添加您在浏览器中尝试过的位置以查看您的文件是否下载？例如当服务器运行并且您尝试 localhost/fonts/glyphicons-halflings-regular.eot 时，响应是什么？如果您将 test.html 放在该目录中，您可以访问该文件还是它也不存在，如果您将它放在一个目录中，您可以访问它，等等

标签： jsp spring-mvc fonts twitter-bootstrap-3 http-status-code-404

【解决方案1】：

我修改了文件：(applicationhost.config) :: 添加 mimeMap

转到%UserProfile%\Documents\IISExpress\config\applicationhost.config

查找

<mimeMap fileExtension=".woff" mimeType="font/x-woff" />

更改或添加

<mimeMap fileExtension=".woff" mimeType="font/woff" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />

【讨论】：

【解决方案2】：

将以下元素添加到您的 web.xml 中，紧接在标记内：

<mime-mapping>
    <extension>.woff</extension>
    <mime-type>application/font-woff</mime-type>
  </mime-mapping>

  <mime-mapping>
    <extension>.woff2</extension>
    <mime-type>application/font-woff</mime-type>
  </mime-mapping>

【讨论】：

【解决方案3】：

Bootstrap 等 CSS 字体引用通常是相对的：
src:url(../fonts/glyphicons-halflings-regular.eot)

所以像这样创建两个文件夹

bootstrap bootstrap.min.css bootstrap.min.js fonts glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff

所以 css 可以引用为： <link rel="stylesheet" href="resources/bootstrap/bootstrap.min.css">

希望对你有帮助

【讨论】：

【解决方案4】：

分配 mime 类型值：

mimeMap：

fileExtension=".woff"
mimeType="application/font-woff"
fileExtension=".woff2"
mimeType="application/font-woff"

【讨论】：