Các tiện ích để kiểm soát biến thể của số.
| Class | Styles |
|---|---|
normal-nums | font-variant-numeric: normal; |
ordinal | font-variant-numeric: ordinal; |
slashed-zero | font-variant-numeric: slashed-zero; |
lining-nums | font-variant-numeric: lining-nums; |
oldstyle-nums | font-variant-numeric: oldstyle-nums; |
proportional-nums | font-variant-numeric: proportional-nums; |
tabular-nums | font-variant-numeric: tabular-nums; |
diagonal-fractions | font-variant-numeric: diagonal-fractions; |
stacked-fractions | font-variant-numeric: stacked-fractions; |
Sử dụng tiện ích ordinal để kích hoạt các ký tự đặc biệt cho các ordinal marker trong các font chữ hỗ trợ chúng:
1st
<p class="ordinal ...">1st</p>Sử dụng tiện ích slashed-zero để buộc sử dụng số 0 có gạch chéo trong các font chữ hỗ trợ chúng:
0
<p class="slashed-zero ...">0</p>Sử dụng tiện ích lining-nums để sử dụng các ký tự số được căn chỉnh theo đường cơ sở (baseline) của chúng trong các font chữ hỗ trợ chúng:
1234567890
<p class="lining-nums ...">1234567890</p>Sử dụng tiện ích oldstyle-nums để sử dụng các ký tự số trong đó một số số có phần descender trong các font chữ hỗ trợ chúng:
1234567890
<p class="oldstyle-nums ...">1234567890</p>Sử dụng tiện ích proportional-nums để sử dụng các ký tự số có chiều rộng tỷ lệ trong các font chữ hỗ trợ chúng:
12121
90909
<p class="proportional-nums ...">12121</p><p class="proportional-nums ...">90909</p>Sử dụng tiện ích tabular-nums để sử dụng các ký tự số có chiều rộng đồng nhất/dạng bảng trong các font chữ hỗ trợ chúng:
12121
90909
<p class="tabular-nums ...">12121</p><p class="tabular-nums ...">90909</p>Sử dụng tiện ích diagonal-fractions để thay thế các số được phân tách bằng dấu gạch chéo bằng các phân số chéo phổ biến trong các font chữ hỗ trợ chúng:
1/2 3/4 5/6
<p class="diagonal-fractions ...">1/2 3/4 5/6</p>Sử dụng tiện ích stacked-fractions để thay thế các số được phân tách bằng dấu gạch chéo bằng các phân số xếp chồng phổ biến trong các font chữ hỗ trợ chúng:
1/2 3/4 5/6
<p class="stacked-fractions ...">1/2 3/4 5/6</p>Các tiện ích font-variant-numeric có thể kết hợp được để bạn có thể kích hoạt nhiều biến thể bằng cách kết hợp chúng:
<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>Sử dụng thuộc tính normal-nums để đặt lại các biến thể font số:
<p class="slashed-zero tabular-nums md:normal-nums ..."> <!-- ... --></p>Prefix a font-variant-numeric utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="proportional-nums md:tabular-nums ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.