2

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

unicode-range: U+0041-U+005a, U+0061-U+007a;

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

前もって感謝します！

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

4

2 に答える 2

5

規則を使用@font-faceして、別のフォントが使用される一部の文字範囲を除いて、フォント ファミリ名 (決定はユーザーが決定) が特定のフォントにマップされるように指定できます。これは、たとえば次のように、ローカル フォントでも機能します。

<style>
@font-face {
  font-family: foo;
  src: local("Times New Roman");
}
@font-face {
  font-family: foo;
  src: local("Arial");
  unicode-range: U+0030-0039;
}
p { font-family: foo }
</style>
<p>hello 123</p>

サポートされているブラウザでは、「hello」は Times New Roman (利用可能な場合) で表示されますが、「123」は Arial (利用可能な場合) で表示されます。範囲U+0030-0039は一般的なヨーロッパの数字 0 ～ 9 です。

ダウンロード可能なフォントにも同様の手法を使用できます。

悪いニュースは、unicode-rangeFirefox または IE 8 以前ではサポートされていないことです。上記のコードでは、IE 8 は後者のルールを無視して Times New Roman を使用しますが@font-face、現在の Firefox はunicode-range制限がなかったかのように Arial を使用します。

于 2014-05-19T16:58:29.883 に答える