1. ホーム
  2. css

[解決済み] woffファイルで@font-faceが404エラーを投げるのはなぜですか?

2022-03-21 07:26:41

質問

私は @font-face 私の会社のサイトでは、うまく機能し、見た目も素晴らしいです。ただし、FirefoxとChromeでは .woff ファイルです。IEはエラーを出しません。フォントはルートに置いていますが、cssフォルダにあるフォントも試しましたし、フォントのURL全体を与えてもみました。cssファイルからこれらのフォントを削除すると、私は404を取得しないので、私はそれが構文エラーではないことを知っています。

また、fontsquirrels ツールで @font-face のフォントとコードです。

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}

解決方法は?

私はこれと同じ症状 - Chromeのwoffファイルで404 - を経験していた、IIS 6でWindows Server上のアプリケーションを実行していた。

もし、同じ状況にある場合は、以下の方法で解決できます。

解決方法1

IISマネージャ(Webサイトのプロパティの「HTTPヘッダー」タブ)を使用して、以下のMIMEタイプ宣言を追加するだけです。 <ストライク .woff アプリケーション/X-woff "

更新しました。 によると woffフォントのMIMEタイプ Grsmto の場合、実際のMIMEタイプは <ストライク application/x-font-woff (for Chrome at least). x-woffはChromeの404を修正し、x-font-woffはChromeの警告を修正します。

2017年現在 : Woffフォントは、現在では標準化され RFC8081仕様 をMIMEタイプに font/wofffont/woff2 .

Seb Dugganに感謝します。 http://sebduggan.com/posts/serving-web-fonts-from-iis

解決策2

また、MIME タイプを ウェブ設定 :

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>