Utilities for controlling the variant of numbers.
Use the font-variant-numeric
utilities to enable additional glyphs for numbers, fractions, and ordinal markers (in fonts that support them).
These utilities are composable so you can enable multiple font-variant-numeric
features by combining multiple classes in your HTML:
<p class="ordinal slashed-zero tabular-nums ...">1234567890</p>
Note that many fonts don’t support these features (stacked fractions support for example is especially rare), so some of these utilities may have no effect depending on the font family you are using.
Use the ordinal
utility to enable special glyphs for the ordinal markers.
1st
<p class="ordinal ...">1st</p>
Use the slashed-zero
utility to force a 0 with a slash; this is useful when a clear distinction between O and 0 is needed.
0
<p class="slashed-zero ...">0</p>
Use the lining-nums
utility to use the numeric glyphs that are all aligned by their baseline. This corresponds to the lnum
OpenType feature. This is the default for most fonts.
1234567890
<p class="lining-nums ...">1234567890</p>
Use the oldstyle-nums
utility to use numeric glyphs where some numbers have descenders. This corresponds to the onum
OpenType feature.
1234567890
<p class="oldstyle-nums ...">1234567890</p>
Use the proportional-nums
utility to use numeric glyphs that have proportional widths (rather than uniform/tabular). This corresponds to the pnum
OpenType feature.
12121
90909
<p class="proportional-nums ...">12121</p>
<p class="proportional-nums ...">90909</p>
Use the tabular-nums
utility to use numeric glyphs that have uniform/tabular widths (rather than proportional). This corresponds to the tnum
OpenType feature.
12121
90909
<p class="tabular-nums ...">12121</p>
<p class="tabular-nums ...">90909</p>
Use the diagonal-fractions
utility to replace numbers separated by a slash with common diagonal fractions. This corresponds to the frac
OpenType feature.
1/2 3/4 5/6
<p class="diagonal-fractions ...">1/2 3/4 5/6</p>
Use the stacked-fractions
utility to replace numbers separated by a slash with common stacked fractions. This corresponds to the frac
OpenType feature. Very few fonts seem to support this feature — we’ve used Ubuntu Mono here.
1/2 3/4 5/6
<p class="stacked-fractions ...">1/2 3/4 5/6</p>
Use the normal-nums
propery to reset numeric font variants. This is usually useful for resetting a font feature at a particular breakpoint:
<p class="slashed-zero tabular-nums md:normal-nums ...">12345</p>
To control font-variant-numeric
property of an element at a specific breakpoint, add a {screen}:
prefix to any existing font-variant-numeric
utility. For example, use md:tabular-nums
to apply the tabular-nums
utility at only medium screen sizes and above.
<div class="proportional-nums md:tabular-nums">
<!-- ... -->
</div>
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
默認情況下, 只有 響應式 的 font variant numeric 變化模式 (variants) 會產生。
在 tailwind.config.js
的 variants
區塊中變更 fontVariantNumeric
屬性來決定有哪些變化模式會生成。
舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ fontVariantNumeric: ['responsive', 'hover'],
}
}
}
如果你不打算在專案中使用 font variant numeric 功能,可以在你的設定檔裡的 corePlugins
屬性中將 fontVariantNumeric
設定為 false
來停用功能:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ fontVariantNumeric: false,
}
}