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

Question

我已经尝试了很多并且看到了很多答案，但没有人帮助我。 我不知道为什么glyphicons-halflings-regular.woff2无法加载，即使我有最新的bootstrap版本。

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');
}

Answer 1

分配mime类型值：

<强> mimeMap：

• fileExtension = “WOFF”

• mime类型= “应​​用/字体WOFF”

• fileExtension =”。woff2"

• mime类型= “应​​用/字体WOFF”

Answer 2

我修改了文件：（applicationhost.config）::添加mimeMap

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

查找

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

更改或添加

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

Answer 3

CSS字体引用如Bootstrap通常是相对的：
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">

希望这有帮助

Answer 4

立即在＆lt; web-app＆gt; 标记内的 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>