javascript - Bootstrap woff2 フォントが正しくロードされない

Question

Bootstrap フォントが glyphicons-halflings-regular.woff2 を正しくロードしない。

Chrome コンソールにエラーが表示されます。

コンソールにエラーが表示されないように、適切にロードするための解決策はありますか?

Answer 1

投稿に asp.net-mvc タグを付けたので、IIS 構成ソリューションを提供します。

Web サーバーが MIME タイプ「woff」または「woff2」で構成されていない場合、Chrome は woff を消費せず、404 エラーをスローします。

---

IIS に woff2 の MIME-TYPE を追加する必要があります。これは web.xml で構成できます。

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

---

また、IIS マネージャーを使用してこれを行うこともできます。

1. IIS マネージャーを開く
2. 機能ビュー -> MIME タイプ
3. アクション -> 追加
4. [MIME タイプ] ボックスが追加され、ファイル拡張子 ".woff2" に woff2 拡張子が追加されます。
5. MIME タイプも「application/font-woff2」です。

---

画像による IIS マネージャーのワークスルー。

Answer 2

小さなハック 1) glyphicons-halflings-regular.woff を検索します 2) glyphicons-halflings-regular.woff を glyphicons-halflings-regular.woff2 としてコピーします 3) これを必要なフォルダーに置きます。私の場合はうまくいきました。