[解決済み] CSSの@font-faceがFirefoxで機能せず、ChromeとIEで機能する。

質問

以下のコードは、Google Chromeのベータ版とIE 7で動作します。しかし、Firefoxでは問題があるようです。私は、Firefoxがクロスドメインのインポートについてあまりフレンドリーではないことを知っているので、私のCSSファイルが含まれている方法の問題であることを疑っています。

しかし、これはすべて静的なHTMLであり、クロスドメインであることは問わない。

私のlanding-page.htmlでは、このようにCSSのインポートを行っています。

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

main.cssの中に、もう一つ、こんな感じでimportしています。

@import url("reset.css");
@import url("style.css");
@import url("type.css");

で、type.cssの中で以下のように宣言しています。

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

type.cssと同じ場所に"font"というディレクトリを持っています。このフォント・ディレクトリには、すべてのwoff/ttf/svgファイルなどが含まれています。

この件では困っています。 ChromeとIEでは動作するが、Firefoxでは動作しない . どうしてこんなことが可能なのでしょうか？何が足りないのでしょうか？

解決方法は？

ローカルでサイトを運営する ( file:/// )

Firefoxは、非常に厳格なquot;ファイルURI origin"を備えています( file:/// ) のポリシーがデフォルトで設定されています。他のブラウザと同じように動作させるには about:config でフィルタリングします。 fileuri を選択し、次のプリファレンスをトグルします。

security.fileuri.strict_origin_policy

に設定します。 虚偽 で、異なるパスレベルにわたってローカルのフォントリソースを読み込むことができるはずです。

パブリッシュド・サイト

下のコメントにあるように、サイトを展開した後にこの問題が発生した場合、追加のヘッダーを追加して、問題がクロスドメインの問題として構成されるかどうかを確認することができます。相対パスを指定しているので、そうすべきではないですが、とにかく試してみてください。.htaccess ファイルに、要求された各 .ttf/.otf/.eot ファイルに追加のヘッダーを送信するよう指定してください。

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

正直なところ、この方法で何か変わるとは思っていませんが、とても簡単なので試してみる価値はあるでしょう。 base64エンコーディング をフォントの書体に使うと、不格好ですが、これもうまくいくかもしれません。

素敵なまとめがあります こちら