フォントバリアント数値

Tailwind CSS version
v1.8.0+

数値のバリアントを制御するためのユーティリティ。

Class reference

Class
Properties
.normal-numsfont-variant-numeric: normal;
.ordinalfont-variant-numeric: ordinal;
.slashed-zerofont-variant-numeric: slashed-zero;
.lining-numsfont-variant-numeric: lining-nums;
.oldstyle-numsfont-variant-numeric: oldstyle-nums;
.proportional-numsfont-variant-numeric: proportional-nums;
.tabular-numsfont-variant-numeric: tabular-nums;
.diagonal-fractionsfont-variant-numeric: diagonal-fractions;
.stacked-fractionsfont-variant-numeric: stacked-fractions;

使用方法

font-variant-numericユーティリティを使用して、数字、分数、および序数マーカーの追加のグリフを有効にします(それらをサポートするフォントであれば)

<p class="ordinal slashed-zero tabular-nums ...">1234567890</p>

多くのフォントはこれらの機能をサポートしていないことに注意してください(たとえば、積み上げ分数のサポートは特にまれです) そのため、使用しているフォントファミリによっては、これらのユーティリティの一部が効果を発揮しない場合があります。

Ordinal

.ordinalユーティリティを使用して、序数マーカーの特別なグリフを有効にします。

1st

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

Slashed Zero

.slashed-zeroユーティリティを使用して、スラッシュ付きの0にします。これは、Oと0を明確に区別する必要がある場合に役立ちます。

0

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

Lining figures

.lining-numsユーティリティを使用して、すべてベースラインで整列された数値グリフを使用します。 これは、lnumOpenType機能に対応します。これはほとんどのフォントのデフォルトです。

1234567890

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

Oldstyle figures

.oldstyle-numsユーティリティを使用して、一部の数値に子孫がある数値グリフを使用します。 これは、onumOpenType機能に対応します。

1234567890

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

Proportional figures

.proportional-numsユーティリティを使用して、(均一/表形式ではなく)比例した幅を持つ数値グリフを使用します。 これは、pnumOpenType機能に対応します。

12121

90909

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

Tabular figures

.tabular-numsユーティリティを使用して、(比例ではなく)均一/表の幅を持つ数値グリフを使用します。 これは、tnumOpenType機能に対応します。

12121

90909

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

Diagonal fractions

.diagonal-fractionsユーティリティを使用して、スラッシュで区切られた数値を一般的な対角分数に置き換えます。 これは、fracOpenType機能に対応します。

1/2 3/4 5/6

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

Stacked fractions

.stacked-fractionsユーティリティを使用して、スラッシュで区切られた数値を一般的な積み上げ分数に置き換えます。 これは fracOpenType機能に対応します。この機能をサポートしているフォントはほとんどないようです。ここではUbuntuMonoを使用しました。

1/2 3/4 5/6

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

Resetting numeric font variants

.normal-numsプロパティを使用して、数値フォントのバリアントをリセットします。 これは通常、特定のブレークポイントでフォント機能をリセットする場合に役立ちます。

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

レスポンシブ

特定のブレークポイントで要素の font-variant-numericプロパティを制御するには、既存の font-variant-numericユーティリティに {screen}:プレフィックスを追加します。 たとえば、md:tabular-numsを使用して、中程度の画面サイズ以上でのみ tabular-numsユーティリティを適用します。

<div class="proportional-nums md:tabular-nums">
  <!-- ... -->
</div>

Tailwindのレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

カスタマイズ

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはfont variant numeric utilitiesのために作られます。

あなたはどのバリアントがfont variant numeric utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのfontVariantNumericプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     fontVariantNumeric: ['responsive'],
+     fontVariantNumeric: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしfont variant numeric utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのfontVariantNumeric propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     fontVariantNumeric: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!