font-variant-numeric

例

序数グリフの使用

ordinal ユーティリティを使用して、序数マーカー用の特別なグリフをサポートするフォントで有効にします

<p class="ordinal ...">1st</p>

スラッシュ付きゼロの使用

slashed-zero ユーティリティを使用して、スラッシュ付きのゼロをサポートするフォントで強制的に使用します

<p class="slashed-zero ...">0</p>

ライニング数字の使用

lining-nums ユーティリティを使用して、ベースラインで揃えられた数値グリフをサポートするフォントで使用します

<p class="lining-nums ...">1234567890</p>

オールドスタイル数字の使用

oldstyle-nums ユーティリティを使用して、一部の数字がディセンダーを持つ数値グリフをサポートするフォントで使用します

<p class="oldstyle-nums ...">1234567890</p>

プロポーショナル数字の使用

proportional-nums ユーティリティを使用して、プロポーショナル幅を持つ数値グリフをサポートするフォントで使用します

<p class="proportional-nums ...">12121</p>
<p class="proportional-nums ...">90909</p>

等幅数字の使用

tabular-nums ユーティリティを使用して、均一/等幅の数値グリフをサポートするフォントで使用します

<p class="tabular-nums ...">12121</p>
<p class="tabular-nums ...">90909</p>

対角線分数

diagonal-fractions ユーティリティを使用して、スラッシュで区切られた数値を、サポートするフォントで一般的な対角線分数に置き換えます

<p class="diagonal-fractions ...">1/2 3/4 5/6</p>

積み重ね分数

stacked-fractions ユーティリティを使用して、スラッシュで区切られた数値を、サポートするフォントで一般的な積み重ね分数に置き換えます

<p class="stacked-fractions ...">1/2 3/4 5/6</p>

複数のユーティリティのスタック

font-variant-numeric ユーティリティは構成可能であるため、それらを組み合わせることで複数のバリアントを有効にできます

<dl class="...">
  <dt class="...">Subtotal</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$100.00</dd>
  <dt class="...">Tax</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$14.50</dd>
  <dt class="...">Total</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$114.50</dd>
</dl>

数値フォントバリアントのリセット

normal-nums プロパティを使用して、数値フォントバリアントをリセットします

<p class="slashed-zero tabular-nums md:normal-nums ...">
  <!-- ... -->
</p>

レスポンシブデザイン

プレフィックスa font-variant-numeric ユーティリティ md: のようなブレークポイントバリアントとともにユーティリティを適用して、medium 画面サイズ以上

<p class="proportional-nums md:tabular-nums ...">
  Lorem ipsum dolor sit amet...
</p>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。