css - CSS @ font-faceはFirefoxでは機能しませんが、ChromeとIEでは機能します

Question

次のコードは、GoogleChromeベータ版とIE7で機能します。ただし、Firefoxには問題があるようです。Firefoxがクロスドメインのインポートについてあまり友好的ではないことを知っているので、CSSファイルがどのように含まれるかという問題であると思われます。

しかし、これはすべて静的HTMLであり、クロスドメインの問題はありません。

私のlanding-page.htmlでは、次のようにCSSインポートを実行します。

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

main.css内に、次のような別のインポートがあります。

@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では動作しません。これはどのように可能ですか？私は何が欠けていますか？

score 238 · Accepted Answer

サイトをローカルで実行する（`file:///`）

Firefoxには、デフォルトで非常に厳密な「file uri origin」（file:///）ポリシーが付属しています。他のブラウザと同じように動作させるには、に移動しabout:config、フィルタを適用しfileuriて、次の設定を切り替えます。

security.fileuri.strict_origin_policy

falseに設定すると、さまざまなパスレベルでローカルフォントリソースをロードできるようになります。

公開サイト

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

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

率直に言って、違いが生じるとは思いませんが、非常に単純なので試してみる価値があります。それ以外の場合は、フォントの書体にbase64エンコーディングを使用してみてください。醜いですが、うまくいく可能性があります。

素敵な要約はここにあります

score 42 · Accepted Answer

.htaccessに以下を追加することに加えて：（@ Manuelに感謝）

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

Webフォントのmimeタイプを.htaccessファイルに明示的に追加してみてください...次のようになります。

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

結局、私の.htaccessファイルは次のようになります（すべてのブラウザーでWebフォントを機能させるセクションの場合）

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

# END REQUIRED FOR WEBFONTS

score 16 · Accepted Answer

私もこの問題を抱えています。私はここで答えを見つけました：http ：//www.dynamicdrive.com/forums/showthread.php？t = 63628

これはFirefoxで機能するソリューションの例です。この行をフォント面cssに追加する必要があります。

src: local(font name), url("font_name.ttf");

score 4 · Accepted Answer

私も同じ問題を抱えていました。H1、H2、または@font-faceルールでターゲットにしているスタイルのコードを再確認してください。font-family: 'custom-font-family' Arial, Helvetica etcFirefoxを除くすべてのブラウザで正常に表示された後、コマが欠落していることがわかりました。コマを追加して動作しました。

score 4 · Accepted Answer

私の同僚が関連する「Firefoxではなく他のすべての場所でフォントフェイスが機能しない」問題の解決策を見つけたので、これをここに残しておきます。

問題は、Firefoxがfont-family宣言をめちゃくちゃにしていたことでしたが、これで修正されました。

body{ font-family:"MyFont" !important; }

PS：私もhtml5boilerplateを使用していました。

score 4 · Accepted Answer

私はまったく同じ問題を抱えていました。「fonts」という新しいフォルダを作成して、wp_contentに配置する必要がありました。このようにブラウザからアクセスできますhttp://www.example.com/wp-content/fonts/CANDY.otf

以前は、fontsフォルダーは私のCSSファイルと同じディレクトリにあり、@font-faceは次のようになりました。

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

上で述べたように、これはFirefoxでは機能せず、Chromeでのみ機能していました。絶対パスを使用したため、現在は機能しています。

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

score 3 · Accepted Answer

Macでff4を実行すると、まさにこの問題が発生しました。ローカル開発サーバーを実行していて、@font-face宣言は正常に機能しました。私はライブに移行し、FFは最初のページの読み込み時に正しいタイプを「フラッシュ」しましたが、より深くナビゲートすると、書体はデフォルトでブラウザーのスタイルシートになりました。

私は解決策が.htaccessに次の宣言を追加することにあることを発見しました

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

経由で見つかりました

score 3 · Accepted Answer

まだ誰も言及していない簡単な解決策の1つは、base64エンコーディングを使用してフォントをcssファイルに直接埋め込むことです。

fontsquirrel.comを使用している場合は、font-face Kit Generatorでエキスパートモードを選択し、下にスクロールして、[ CSSオプション]で[ Base64エンコード]を選択します。ダウンロードしたFont-Kitはプラグアンドプレイの準備ができています。

これには、必要なhttpリクエストが1つ少なくなるため、ページの読み込み時間が短縮されるという周辺的な利点もあります。

score 3 · Accepted Answer

ファイル名に特定の文字が含まれている場合、Firefoxで問題が発生するフォントがあることをお伝えしておきます。最近、ファイル名が「237D7B_0_0」のフォント「Modulus」で問題が発生しました。ファイル名のアンダースコアを削除し、新しいファイル名に一致するようにcssを更新すると、この問題が解決しました。同様の文字を持つ他のフォントには、この問題はありません。これは非常に興味深いものです...おそらくFirefoxのバグです。ファイル名は英数字だけにすることをお勧めします。

score 2 · Accepted Answer

特にこのフォントの場合、GoogleFontAPIを使用する必要があります。

http://code.google.com/webfonts/family?family=Droid+Sans

それでもFontSquirrelのキットジェネレーターを使用したい場合は、Smileyハックオプションを使用してローカルフォントの問題を解消してください。キットを生成したら、生成されたdemo.htmlがFireFoxで機能することを確認します。きっとそうだろう。それをサーバーにアップロードします。FontSquirrelは素晴らしいので、そこでも機能すると思います。

ただし、生成されたキットコードをプロジェクトに統合しているときに壊れた場合は、デバッグの標準的な方法を使用してください。404を確認し、問題が見つかるまで1行ずつ確認してください。WOFFは間違いなくFFで機能するはずなので、開始するのに適した場所です。

最後に、これがうまくいかない場合は、FireFoxを更新してください。私はあなたが最新のものを使用していると仮定してこれをすべて書きました。ただし、チェックインするバージョンを指定しなかったため、それも問題になる可能性があります。

score 2 · Accepted Answer

ディレクティブでローカルソース宣言を弱体化してみてください@font-face。

FirefoxまたはGoogleFontAPIのいずれかに既知のバグがあり、フォントがローカルにインストールされていて、定義されたローカル名と一致する場合に、フォントのバリアントを使用できなくなります。

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

ローカル宣言を効果的に弱めるには、ローカルソース文字列を意味のないものにします。これについて一般的に受け入れられている規則は、smiley unicode文字（"☺"）を使用することです。なんで？ポールアイリッシュは彼のブログで素晴らしい説明をしています：

http://paulirish.com/2010/font-face-gotchas/#smiley

score 1 · Accepted Answer

これをローカルファイルでテストしていますか、それともWebサーバーからテストしていますか？異なるディレクトリ内のファイルは、クロスドメインルールでは異なるドメインと見なされるため、ローカルでテストしている場合は、クロスドメインの制限に直面する可能性があります。

それ以外の場合は、問題が発生しているURLを指定すると役立つ可能性があります。

また、Firefoxのエラーコンソールを調べて、CSS構文エラーやその他のエラーが報告されているかどうかを確認することをお勧めします。

また、2番目の@ font-faceルールでfont-weight：boldが必要になる可能性があることに注意してください。

score 1 · Accepted Answer

これは、フォント面のパスを設定する方法に問題があります。パスを「/」で開始しなかったため、Firefoxはスタイルシートのパスに基づいてフォントを検索しようとします。したがって、基本的に、Firefoxは「root / css/font」ディレクトリではなく「root/css/font」ディレクトリでフォントを検索します。「root/font」ディレクトリ。これは、フォントフォルダーを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";
}

score 1 · Accepted Answer

この問題に直面したとき、.htaccessアクセス制御の[発信元を許可]ルールを使用しても機能しませんでした。

代わりに、IISのweb.configに、以下に示すsystem.webServerブロックを挿入します。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

これは私にとって魅力のように機能しました。特定のドメインへのアクセスを制限する必要がある場合は、*をドメインに置き換えてください。

score 1 · Accepted Answer

Firefoxでフォントを正しく表示するために同じ問題が発生していました。これが私が私のために働くことがわかったものです。url属性でフォントを保持しているディレクトリの前にスラッシュを追加します。これが私の前と後のバージョンです：

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

URLの「fonts」の前にある先頭のスラッシュに注意してください。これにより、ブラウザはルートディレクトリから開始して、リソースにアクセスするようになります。少なくとも私にとっては-問題は解決しました。

score 1 · Accepted Answer

外部フォントをインポートしようとすると、Firefoxやその他のブラウザで最も一般的な問題の1つに直面します。フォントがGoogleChromeまたは他のブラウザのいずれかで正常に機能する場合がありますが、すべてのブラウザで機能するわけではありません。

このタイプのエラーには多くの理由があります。この問題の背後にある最大の理由の1つは、以前の定義済みフォントです。以下のように、CSSコードの各行の終わりの後に！importantキーワードを追加する必要があります。

例：

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

説明：CSSファイルまたはここのコードに上記のコードを入力します。上記の例では、「Hacen Saudi Arabia」をフォントファミリに置き換え、フォントディレクトリに従ってurlを置き換えます。

cssコードブラウザに！importantと入力すると、このセクションに自動的にフォーカスされ、以前に使用されたプロパティが上書きされます。詳細については、https ：//answerdone.blogspot.com/2017/06/font-face-not-working-solution.htmlをご覧ください。

score 0 · Accepted Answer

404を入手したかどうか、firebugで確認できますか？パスで問題が発生し、拡張子は同じですが、linuxfile.ttfがfile.TTF...とは異なり、Firefoxを除くすべてのブラウザーで機能することがわかりました。

お役に立てば幸いです。

score 0 · Accepted Answer

これを試して....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

score 0 · Accepted Answer

私も同様の問題を抱えていました。fontsquirelデモページはFFで機能していましたが、すべてのファイルが同じドメインからのものであったとしても、私自身のページでは機能しませんでした。

スタイルシートを絶対URL（http://example.com/style.css）にリンクしていることが判明したため、FFはそれが別のドメインからのものであると考えました。スタイルシートのリンクhrefを/style.cssに変更すると、代わりに修正されました。

score 0 · Accepted Answer

おそらくあなたの問題は、特にスペースとハイフンの使用（または使用しない）に関する命名の問題です。

私はsimilairの問題を抱えていました。これは、font- / family-namesの前後にオプションの引用符（'）を配置することで修正したと思いましたが、実際には名前の問題を暗黙的に修正しました。

私はCSSの仕様について完全に最新ではありません。また、さまざまなクライアントが仕様をどのように解釈するかについて、（少なくとも私には）あいまいさがあります。さらに、PostScriptの命名規則にも関連しているようですが、間違っている場合は訂正してください。

とにかく、私が今理解しているように、あなたの宣言は2つの可能な異なるフレーバーの混合物を使用しています。

@font-face {
  font-family: "DroidSerif Regular";

たとえば、 SansとSerifがメンバーである実際のファミリ名をDroidと見なす場合は、たとえば、その子であるSansRegularやSerifBoldのように、ここでスペースを使用して識別子を連結するか、スペースを削除してCamelCasingを使用します。 familyName、およびサブ識別子のハイフン。

宣言に適用すると、次のようになります。

@font-face {
  font-family: "Droid Serif Regular";

また

@font-face {
  font-family: DroidSerif-Regular;

引用符の有無にかかわらず、どちらも完全に合法である必要があると思いますが、さまざまなクライアント間で成功を収めてきました。たぶん、ある日、私はこの/これらの問題の詳細を理解する時間があります。

この記事は、関連するいくつかの側面を理解するのに役立ちました：http: //mathiasbynens.be/notes/unquoted-font-family

この記事には、PostScriptの詳細と、Adobe仕様のPDFへのリンクが含まれています：http： //rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

score 0 · Accepted Answer

フォントファミリーから引用符とスペースを削除するだけで、設定をいじくり回す必要はありません。

これ

body {font-family: "DroidSerif Regular", serif; }

これになります

body {font-family: DroidSerifRegular, serif; }

score 0 · Accepted Answer

私の場合、フォントフェイススタイルのコードを挿入する際の問題が大好きでした

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

index.htmlまたはphpページのヘッダーのスタイルタグの方向性。私のために働く！

score 0 · Accepted Answer

そのため、これはこの問題に対するGoogleの上位の結果の1つです。この問題を解決したものを追加したいと思います。

font-faceのsrcからformat（opentype）を削除する必要がありましたが、Firefoxでも機能しました。それ以前はChromeとSafariで問題なく動作していました。

score 0 · Accepted Answer

コードが原因ではなく、Firefoxの設定が原因である可能性があります。

Tool bar WesternからUnicodeまでこれを試してください

View > Text Encoding > Unicode

score 0 · Accepted Answer

私は同じ問題を抱えていて、コンテンツのメタを追加することでそれを解決しました：

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

これは、HTMLにUnicodeテキストがある場合、FirefoxとEdgeで発生します。

score 0 · Accepted Answer

Firefoxでは、Webフォントを完全にオフに切り替えることができます。これは私の場合でした。

オンにするには、[設定]>[コンテンツ]>[詳細]に移動し、チェックボックスをオンにします。

fontspringの関連記事

score 0 · Accepted Answer

リストに追加するものがもう1つあります。src一般的なフォント名と一致する名前でローカルを指定すると、Firefox（およびFirefoxのみ）のルール全体に違反することがわかりました。例：

@font-face {
  font-family: code;
  src: local(Monaco),
       url(monaco.woff2) format("woff2"),
       local(monospace);
}

これはFirefox（バージョン95.0.2以降）では失敗し、最後の値がFirefoxでサポートされてsrcいる汎用フォント（）の名前と一致するため、スタイルなしのデフォルト（Times）でテキストが表示されます。monospace次の値はすべて同じように失敗します。

cursive
fantasy
monospace
sans-serif
serif
system-ui

それは確かに（そしておそらくバグの）エッジケースですが、誰かを助けるかもしれません。この方法で汎用フォントにフォールバックすることはできません。何らかの理由で同じ名前のローカルフォントを参照する必要がある場合は、引用符で囲む必要があります。

score -2 · Accepted Answer

フォント宣言でsvgを使用する必要があったため、構文をどのように作成したかはわかりませんが、Font Squirelには、1つのフォントから防弾構文のfont-faceを作成するための非常に優れたツールがあります。

http://www.fontsquirrel.com/fontface/generator

score -2 · Accepted Answer

font-faceタグのパスでURLを使用することもできます。「http://domain.com」を使用している場合、Firefoxでは機能しません。私にとっては「http://www.domain.com」に変更すると機能しました。

score -2 · Accepted Answer

私の問題は、Windowsがフォントに「font.TTF」という名前を付け、firefoxが「font.ttf」を期待していたことでした。Linuxでプロジェクトを開いた後、フォントの名前を適切な名前に変更すると、すべてが機能することがわかりました。

css - CSS @ font-faceはFirefoxでは機能しませんが、ChromeとIEでは機能します

30 に答える 30

サイトをローカルで実行する（file:///）

公開サイト

Related

Reference

サイトをローカルで実行する（`file:///`）