@media 内にネストされた @font-face は Firefox 3.5 および IE8 では機能しません

Question

アップデート:実際には問題の原因ではない相関関係に巻き込まれたようです。問題は実際には、CSS ファイルのデプロイ方法とは無関係な問題でした。詳細については、以下の私の回答を参照してください。

@font-face は WebKit (Safari および Chrome) と Opera では正常に動作しますが、Firefox 3.5 または IE 8 では動作しません。

Google などの推奨に従い、CSS を含むすべての静的アセットをメイン サイトとは別のドメインから提供しています。 同じドメインからすべてを提供すると、すべてのブラウザで正常に動作します （注記：これは、CSS 構文に関する答えは役に立たないことを意味します。私はすでにすべてを理解しており、うまく機能しています。これはクロスドメインの問題のみに関するものです)。

静的アセット ドメインから CSS ファイルとフォント ファイルを提供し、静的アセット サーバーに適切な アクセス制御ヘッダー (アクセス制御許可オリジン)、 すべき FF 3.5 と IE を除くどこでも動作します。

これを機能させるには何をする必要がありますか?

Answer 1

私がこれまでに発見した最良の答えは、他の人に役立つことを願っています：

私の知る限り、重要な問題は、CSS ファイル (フォント ファイルではなく) がクロスドメインで読み込まれるかどうかです。@font-face 宣言を含む CSS ファイルを静的アセット ドメインからロードすると、アクセス コントロール ヘッダーに関係なく、何をしてもフォントが FF または IE で動作しません。ページと同じドメインから CSS ファイルをロードするか、@font-face 宣言をページ ヘッドのスタイル ブロックに移動するだけであれば、すべてのブラウザで機能します (フォント ファイルをクロスドメインでロードすることもできます)アクセス制御ヘッダーが設定されている限り)。

要約する：私の知る限り、FF 3.5 および IE 8 は、クロスドメインで読み込まれた CSS ファイル内の @font-face 宣言を尊重することを何があっても拒否します。

誰かがより良く知っており、私が他に間違っている可能性があることを指摘できる場合は、この点を修正してもらいたいと思っています。

確かに、私は間違っていました。専用ドメインから提供されるアセットをデプロイするために使用していた CSS コンプレッサーが、CSS のチャンク全体を「@media screen { ...」でラップしていたことが判明しました。}"。私は @font-face ルールを注意深く比較して、コンプレッサーによってそれらのルールが変更されていないことを確認しましたが、CSS ファイルの先頭と末尾をチェックしてその折り返しを検出することは一度もありませんでした。同じドメインの提供に切り替えたとき、そのラッピングは発生しませんでした。

結局のところ、IE と Firefox は @media 内でラップされた @font-face 宣言を尊重しません。Safari、Chrome、Opera は可能です。

はぁ。

Answer 2

見ることをお勧めします この IE ブログ投稿, では、IE でフォントの埋め込みを行う方法について説明します。いいえ、それは CSS3 の方法と一致しません。また、IE では @font-face を使用してこれを行う他の方法はありません。

Microsoft が EOT アプローチを標準化するために W3C に提出し、W3C が 関心を示した その行動の過程で。

Answer 3

このリンクはとても役に立ちました: http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master

残念ながら、試してみたかったフォントのほとんどのテキストの品質には非常に失望しました。一部のフォントがアンチエイリアス可能ではないかどうかを判断できませんでしたが、満足のいく結果が得られず、今でも画像置換を使用しています。