問題タブ [unicode-range]

いくつかの html ドキュメントでは、2、3 語だけに Web フォントを使用しています。完全なフォントファイルをロードするのはパフォーマンス的に無駄に思えます。これは、 @font-face 宣言の unicode-range パラメータの出番です。

http://www.w3.org/TR/css3-fonts/#unicode-range-desc

これにより、フォントファイルのどの文字をロードするかを定義できるため、パフォーマンスが大幅に向上します。しかし、私はそれを機能させることができません。奇妙なことに、Firefox ではすべての文字が表示され、宣言に unicode-range パラメーターを含めただけでは、サファリでフォントを読み込めません。以下は、私がテストしていたhtmlです。

css で font-face を使用していますが、デザイナーが作成した font-family の src を使用して作成し、英語の文字までの範囲で別の font-face を作成するヘブライ文字が原因であるという問題があります。同じコンテナのヘブライ文字の隣に巨大です。

ここに私のcssコードがあります:

任意の文字の場合:

英語の文字の例外については、

ご覧のとおり、同じフォント ファミリを持っています。

私はそれらを異なるフォントで取得していますが、文字のサイズの違いは非常に大きいです。

これについて何か助けはありますか？

ありがとう 、

エラン

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 番目のルールでルールをフォローアップできる場合です。

私は次のものを持っています：

カスタムフォントが適用されていますが、メンシュではアンパサンドがサポートされていないため、アンパサンドの場合は条件付きでフォントにサンセリフを適用しようとしています。上記のコードは機能しません。アンパサンドが表示されません。私は何を間違っていますか？

CSS3プロパティを使用してunicode-range、さまざまな文字セットにさまざまなフォントを設定しています。Arialラテン文字の場合はWebNazanin、アラビア語/ファルシ語の場合は a です。Chrome 29 と IE10 では動作するようですが、Firefox 23 では動作しないようです。Firefox ではまだArialフォントを使用しています:

Chrome スクリーンショット:

それは私のCSSです：

JSFiddle: http://jsfiddle.net/maysamsh/t9MpF/

カスタム フォントを使用しており、@font-face から読み込んでいます。テキストはきれいに見えますが、数字はおかしく見えます（chrome-windowsでのみ、これは非常によく知られているバグです。はい、chromeのsvg形式を使用してみました。これにより、数字は解決されましたが、テキストがねじれました）。私は自分のフォントを のみに制限することに決めました。このジェネレーター[a-z][A-Z]を使用すると、次のようになりました。

そして、それは... 機能していないようです。数値は引き続きフォントを使用して表示されます。使用する適切な範囲を見つけるにはどうすればよいですか\他の解決策はありますか? たとえば、将来のフォントも制限したい場合など、一般的な解決策が欲しいです。

前もって感謝します！

Ps 私がこの件について話している間、同じフォントを 2 回ロードする方法はないと仮定しています -.svgファイルを数値と.otfテキストに使用しますよね? 可能であれば、それも素晴らしいからです。

フォントの Unicode 範囲を縮小してアプリのサイズを制限しようとして苦労しています。

いくつかの異なる組み合わせを試しましたが、そこにどの範囲を入れてもエラーは同じです:

-無効な Unicode 範囲 '005A'

これを行うと、005Aは何でもかまいません。

エラーは次のとおりです: -無効な Unicode 範囲 '007E'

さまざまなフォント、Arial、Helvetica、Century を試してみました...全員で同じエラーが発生し、すべての Unicode 範囲で CSS ファイルにエラーがスローされます。

何が間違っている可能性がありますか？Adobe のドキュメントを読みましたが、他に何をすべきかわかりません。

私の質問は、この回答のフォローアップと見なすことができます。

私は自分のプロジェクトに Google フォントを使用していますが、ユニコードの範囲を変更したいので、影響を受けるのは数字だけです (上記のリンクされた回答を参照)。私の問題は、インクルードで動作しないことです:

このようにフォントをインポートすると、フォント フェイスはすでに Google によって生成されています (Google はクロス ブラウザーの問題を回避するための正しいフォント フェイスのセットアップも提供しており、非常に便利です)。インポートしたフォントフェイスを次のように上書きしてみました:

しかし、それはうまくいきませんでした。数字のみを添付するという望ましい効果を実現するには、Google のインポート URL から CSS を取得し、それを独自の CSS/SASS ドキュメントにコピーする必要があります。しかし、その後、Google Fonts API によって行われたクロス ブラウザー サービスと CDN の速度が失われます。

Google フォントのインポートを維持しながら unicode-range を変更する方法はありますか、それとも unicode-range を使用したい場合に自分でフォントをホストする必要がありますか?

私の Web ページは、想定どおり Yekan フォントを使用してペルシャ語のテキストを表示します。英語のテキストで Alger 以外のフォントが誤って使用されているのはなぜですか?