css - 複数 - woff2 対応ブラウザ




CSS @ font-faceはFirefoxでは動作しませんが、ChromeとIEで動作します (19)

サイトのローカル実行( 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エンコーディングを使ってみてください。

素敵な要約がhereありhere

次のコードは、Google Chromeベータ版とIE 7で動作します。ただし、Firefoxには問題があるようです。 私はそれが私のCSSファイルがどのように含まれているのかという問題であると思っています。なぜなら、Firefoxがクロスドメインのインポートに関してあまり親切ではないことがわかっているからです。

しかしこれはすべて静的な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ファイルなどがすべて含まれています。

私はこの1つに困っています。 ChromeやIEでは動作しますが、Firefoxでは動作しません 。 これはどのように可能ですか? 私は何が欠けていますか?


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

FirefoxまたはGoogle Font APIには、フォントがローカルにインストールされていて、定義されたローカル名と一致する場合に、フォントのバリエーションが使用されないようにする既知のバグがあります。

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

ローカル宣言を効果的に実行するには、ローカルソース文字列を何かナンセンスにしてください。 これに対して一般的に受け入れられている規約は、スマイリーユニコード文字( "☺" )を使用することです。 どうして? Paul Irishは彼のブログで大きな説明をしています:

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


あなたのコードのためではないかもしれません、それはFirefoxの設定のためです。

Tool bar 西洋からUnicodeにこれを試してみてください

View > Text Encoding > Unicode

あなたは404を手に入れたら火かん坊で確認できますか? パスに問題があり、拡張子が同じであることが判明しましたが、Linuxのfile.ttfはfile.TTFとは異なります。これはfirefox以外のすべてのブラウザで動作します。

それが助けて欲しい!


これは、フォントフェースのパスを設定する際の問題です。 「/」でパスを開始しなかったため、Firefoxはスタイルシートのあるパスに基づいてフォントを検索しようとします。基本的に、Firefoxはあなたのフォントを "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";
}

これをローカルファイルでテストするのか、Webサーバーからテストするのですか? 異なるディレクトリのファイルは、クロスドメインルールの異なるドメインと見なされるため、ローカルでテストする場合は、ドメイン間の制限が適用される可能性があります。

それ以外の場合は、問題が発生したURLを指すのに役立ちます。

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

また、おそらくfont-weight:2番目の@ font-faceルールで太字にしたいと思います。


そのため、これはこの問題のトップGoogle結果の1つです。私はこの問題を解決したものを追加したいと思います:

私はfont-faceのsrcからフォーマット(opentype)を取り除かなければなりませんでした。そしてそれはFirefoxでもうまくいきました。 その前にChromeとSafariで正常に動作しました。


また、font-faceタグのパスにURLを使用することもできます。 あなたが "http://domain.com"を使用する場合、それはFirefoxで動作しません、私は "http://www.domain.com"に変更するために働いた。


外部フォントをインポートしようとしている場合は、Firefoxや他のブラウザで最もよくある問題の1つに直面します。 あなたのフォントがGoogle Chromeや他のブラウザのいずれかでうまく動作するが、すべてのブラウザでうまく動作しない場合があります。

このタイプのエラーには多くの理由があります。これは、この問題の最も大きな理由の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"をfont-familyに置き換え、フォントディレクトリごとにURLを置き換えます。

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


恐らくスペースやハイフンの使用に関する(またはそうでない)ネーミングの問題があなたの問題です。

私はsimilairの問題を抱えていましたが、font- / family-namesの前後に任意の引用符( ')を置くことで修正したと思っていましたが、実際に暗黙のうちに名前の問題が修正されました。

私はCSS仕様を完全に最新ではないし、異なるクライアントが仕様をどのように解釈するかにあいまいさがある。 また、PostScriptの命名規則にも関係しているようですが、間違っていれば修正してください!

とにかく私は今それを理解するので、あなたの宣言は2つの可能性のある別個のフレーバーの混合物を使用しています。

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

例えばSans RegularSerif Boldのように、 SansSerifがメンバーである実際の家族名をDroidと考えるならば、識別子を連結するためにスペースを使用するか、CamelCasingをfamilyName、およびサブ識別子のハイフン。

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

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

または

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

私は両方とも完全に合法でなければならないと思いますが、引用符の有無にかかわらず、私はさまざまなクライアント間で成功しています。 たぶん、ある日、私はこの/ isseu / sの詳細を理解する時間があります。

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

この記事では、PostScriptの詳細とAdobe仕様PDFへのリンクをいくつか掲載していますhttp://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/ : http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/


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

問題は、Firefoxがフォントファミリの宣言を使いこなすことだけでした。これで解決しました。

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

PS:私もhtml5boilerplateを使っていました。


私の問題は、Windowsがフォント 'font.TTF'を指定し、firefoxが 'font.ttf'を期待していたことです。私はLinuxでプロジェクトを開いた後、フォントをプロパー名に変更しています。


私は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'の前にスラッシュがあることに気づくでしょうか? これは、ブラウザにルートディレクトリから開始し、リソースにアクセスするように指示します。 少なくとも私のために - 問題解決。


私は、ファイル名に特定の文字が含まれていると、いくつかのフォントにfirefoxで問題があると言いたい。 私は最近、ファイル名 '237D7B_0_0'を持つフォント 'Modulus'の問題に直面しました。 ファイル名のアンダースコアを削除し、新しいファイル名と一致するようにcssを更新すると、この問題は解決しました。 類似の文字を持つ他のフォントには、非常に不思議なこの問題はありません。恐らくFirefoxのバグです。 私は英数字だけにファイル名を保持することをお勧めします。


私はまったく同じ問題を抱えていました。 私は "font"という新しいフォルダを作成して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");
}

私は同じ問題を抱えていた。 H1、H2、または@ font-faceルールでターゲットとするスタイルをコードで再確認してください。 font-family: 'custom-font-family' Arial, Helvetica etc後で私は昏睡状態に陥っていることが分かったfont-family: 'custom-font-family' Arial, Helvetica etc以外にもすべてのブラウザでうまく表示されていた。 私は昏睡状態を追加し、それは働いた。



私も同様の問題がありました。 fontsquirelのデモページはFFで動作していましたが、すべてのファイルが同じドメインから来ていても自分のページではありませんでした!

それは私のスタイルシートを絶対URL(http://example.com/style.css)にリンクしていたので、FFはそれが別のドメインから来ていると思った。 私のスタイルシートのリンクhrefを/style.cssに変更してください。


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

fontsquirrel.comを使用している場合は、フォントフェイスキットジェネレータでエキスパートモードを選択し、下にスクロールしてCSSオプションの Base64 Encodeを選択します。ダウンロードしたフォントキットはプラグアンドプレイできる状態になります。

これには、http要求が1つ少なくて済むため、ページの読み込み時間を短縮できるという利点もあります。





file-uri