[解決済み] woffファイルで@font-faceが404エラーを投げるのはなぜですか?
質問
私は
@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/woff
と
font/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>
関連
-
[CSSチュートリアル】CSS たった1行のコードでアバターと国旗の一体化を実現
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[CSSチュートリアル】height:100%と書いても効かない理由
-
[CSSチュートリアル】CSSの新機能には、ページの再描画や並び替えの問題をコントロールする機能が含まれています。
-
[CSSチュートリアル】ネイティブCSSでテキストの無制限回転を実現する汎用的な方法
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
フロントエンドの落とし穴 リソースはスタイルシートとして解釈されるが、MIMEタイプはtext/htmlで転送される。"<URL>". css スタイルの失敗
-
[解決済み] なぜフォントフェイスにttf, eot, woff, svg,...を含める必要があるのでしょうか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
cssで背景色の半透明化を実現する2つの方法
-
[CSSチュートリアル】CSS擬似要素::マーカー解説
-
[CSSチュートリアル】CSSのシングルDivの描画スキル
-
[CSSチュートリアル】position:stickyでトップ吸い上げアプレット問題を完璧に解決
-
[CSSチュートリアル】CSS3で3つの効果例の背景をぼかす。
-
[CSSチュートリアル】cssフレックスレイアウト ロング自動改行サンプルコード
-
[CSSチュートリアル]テーブル table :nth-child()を使って行間の色変更と整列を実現する。
-
[CSSチュートリアル】シンプルなナビゲーションバー機能を実現するhtml+css
-
[解決済み] WOFFフォントのMimeタイプは?
-
[解決済み】Font Awesomeが機能せず、アイコンが四角で表示される。