1

http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/

unicode-rangeforルールに関する記事を見つけましたが、 Firefox はこのプロパティ@font-faceをサポートしていません。unicode-rangeしかし、著者は回避策を見つけましたが、それは私には理解できません。

それがどのように機能するかわかりません。2 番目の (フォールバック) ルールも を使用しunicode-rangeます。では、なぜすべてのフォント文字に arial フォントを適用することで問題を解決する必要があるのでしょうか?

そして、なぜ最初のバージョンで（unicode-rangeフォールバックルールなしで）それが機能する必要があるのですか。2 番目のルールはすべてのブラウザに毎回適用されると思いますか?

CSS カスケードのルールを利用して、 unicode-rangeサポートされていない場合に適切なフォールバック フォントを取得できるようにすることができます。@font-face理想的なのは、Unicode 範囲が実装されていない場合にルールを上書きする 2 番目のルールでルールをフォローアップできる場合です。

@font-face {
    font-family: 'Ampersand';
    src: local('Baskerville'), local('Palatino'), local('Book Antiqua');
    unicode-range: U+26;
}
@font-face {
    /* Ampersand fallback font */
    font-family: 'Ampersand';
    src: local('Arial');
    unicode-range: U+270C;
}
4

1 に答える 1

2

今日もこの記事に出くわしました。次のように「機能」します。

Firefoxのバグのある動作は次のとおりです。Unicode範囲が指定されている場合、それは無視され、代わりにフォントがすべての文字に適用されます。

したがって、@ font-faceをunicode-rangeで2倍に設定すると、2番目の@ font-faceが使用され、最初の@ font-face'Ampersand'が上書きされ（CSSはこのようにします）、Firefoxのバグは「すべての文字にArialを適用することに注意してください（ユニコード範囲が指定されているため）。（Firefoxでは）ユニコード範囲全体で「アンパサンド」の@font-faceが2倍あります。したがって、2番目のものはCSSによって適用されます。それが機能する理由です。

正しい方法でunicode-rangeをサポートするブラウザは、指定されたunicode-rangeに対して最初の@ font-face宣言を使用し、指定されたunicode-rangeに対して2番目の@ font-faceを使用します–2番目の@font-のunicode-range faceは、誰もがほとんど使用しない文字を指定します。ここでは、カスケードを介して上書きされるものはありません。

お役に立てば幸いです。（そしてその通りです。^^）

編集¹：追加する必要があるかもしれません。これにより、Firefoxは「最高の可能性のあるアンパサンド」ではなく、Arial-アンパサンドを表示します。説明されているソリューション全体は、Firefoxの特別な処理を含むフォールバックソリューションであり、FirefoxのUnicode-Range-Ampersand-Trickを有効にするものではありません。

EDIT²：たぶん、Operaは（まだ）ユニコード範囲もサポートしていないことを知ったばかりですが、追加する必要があります。つまり、Firefoxだけではありません。

于 2013-03-19T19:21:16.273 に答える