Font-Variant-Numeric CSSプロパティは、フォントでサポートされている代替フォームを使用して數(shù)値の表示を制御します。 1.古いスタイルの數(shù)字や裏地數(shù)、比例または表の間隔、分數(shù)、序數(shù)、スラッシュされたゼロなどの文體的なバリエーションを可能にします。 2。oldStyle-Nums、Lining-Nums、Tabular-Nums、および斜めの枝角のような値は、正確なタイポグラフィコントロールを可能にします。 3.これらの値は、設計を強化するために単一の宣言で組み合わせることができます。 4.すべてのフォントがすべてのバリアントをサポートしているわけではないため、Axis-Praxisなどのツールでテストしたり、Googleフォントなどのプラットフォームでフォントの説明をチェックすることが不可欠です。 5.実用的な用途には、財務テーブルの列の列を表に合わせて並べるか、オールドスタイルのnumsを使用したボディテキストの読みやすさを改善することが含まれます。 6. @font-faceを介したブラウザのサポートと正しいフォント機能のアクティベーションも機能に影響を與えます。

CSSの數(shù)字を使用して、専門的に設計された書籍や財務レポートにどのように登場するかなど、もう少し洗練されているようにしたいときは、 font-variant-numericに出くわしたかもしれません。このプロパティは、數(shù)値の表示方法を制御することで、古いスタイルのフィギュアや表形式の間隔などの文體的なバリエーションを可能にします。

それがどのように機能するか、そしてあなたが持っているオプションは次のとおりです。

font-variant-numeric実際に行うこと

そのコアでは、 font-variant-numeric使用する數(shù)字（および分數(shù)や順序インジケーターなどの関連文字）の代替形式をブラウザに伝えます。フォント自體は変更されませんが、現(xiàn)在のフォントがサポートする可能性のある異なる數(shù)字スタイルを切り替えます。

たとえば、いくつかのフォントが提供しています。

• 並べ替え（すべての數(shù)字がベースライン上にあります）
• 古いスタイルの數(shù)字（小文字のように、いくつかの數(shù)字はベースラインの下に浸る）
• 比例または表の間隔
• 分數(shù)と斬新なゼロ

次のように、1つの宣言に複數(shù)の値を組み合わせることができます。

體 {
  Font-Variant-Numeric：oldstyle-nums斜めのフラクション;
}

一般的な値とそれらを使用するタイミング

適用できるいくつかの値があります。これが最も有用なものの內訳です：

• normal - デフォルトの數(shù)値スタイルを使用します。
• oldstyle-nums - いくつかの數(shù)字がベースラインの下に伸びる古いスタイルのフィギュアを有効にします（ボディテキストには最適です）。
• lining-nums - すべての數(shù)字をベースラインに整列させます（見出しやデータディスプレイに適しています）。
• proportional-nums - 數(shù)字はさまざまな幅（通常の文字など）を取ります。したがって、「1」は「8」よりも狹くなります。
• tabular-nums - すべての數(shù)字の幅は等しいため、數(shù)字の列がきれいに並んでいます（テーブルや財務レポートに最適です）。
• diagonal-fractions - 積み重ねられたSuperScript/subscriptの代わりに、傾斜したフォーマットを使用して1/2のような畫分を示します。
• ordinal - 「1st」、「2nd」ディスプレイなどの上付き文字條例を適切に表示します。
• slashed-zero - スラッシュを通してゼロを表示します。これは、文字oと區(qū)別するためにコードまたはデータコンテキストでよく使用されます。

これらは、設計のニーズに応じて混合して一致させることができます。

それが機能することを確認する方法

すべてのフォントがこれらすべての數(shù)値バリアントをサポートするわけではありません。あなたが効果を見ていないなら、それは次の理由かもしれません：

• 現(xiàn)在のフォントには、これらの特定の數(shù)字スタイルは含まれていません。
• ブラウザはそれらを正しくレンダリングすることをサポートしていません。
• Webフォントを使用している場合、機能は@font-face設定を介してフォントで有効になりません。

フォントがこれらの機能をサポートするかどうかを確認するには、 Axis-PraxisやOpentype機能テスターなどのツールが役立ちます。また、多くの最新の可変フォントは、サポートを明確に宣伝しています。

Googleフォントを使用している場合は、フォントの説明にOpentype機能または數(shù)値スタイルに言及しているかどうかに注意してください。

実用的な例：テーブルクリーナーを作成します

あなたが金融テーブルをスタイリングしているとしましょう。おそらく、幅が垂直に整列し、一貫して數(shù)字を整列させたいと思うでしょう。それは、 tabular-nums役立つ場所です。

 TD {
  Font-Variant-Numeric：Tabular-Nums;
}

これにより、すべての數(shù)字が同じスペースを占有するため、追加のパディングハックを必要とせずに列が並んでいます。

または、本のようなレイアウトの素敵なタッチのために、次のことを試してください。

 p {
  Font-Variant-Numeric：Oldstyle-Nums比例數(shù)。
}

この組み合わせは、段落內の數(shù)字の外観を柔らかくし、周囲のテキストとよりよくブレンドします。

それは少しの詳細ですが、 font-variant-numericを使用すると、タイポグラフィに顕著な違いが生じる可能性があります。それはあなたが毎日必要とするものではありませんが、あなたがそうするとき、それは強力なツールです。テストして、フォントがやろうとしていることをサポートすることを忘れないでください。

以上がフォントバリアント數(shù)はどのようにスタイリング番號のために機能しますか？の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。