文字排版
font-variant-numeric
用於控制數字變體的工具。
| 類別 | 樣式 |
|---|---|
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; |
範例
使用序數符號
使用 ordinal 工具來啟用支援序數標記的字體中的特殊符號
1st
<p class="ordinal ...">1st</p>使用帶斜線的零
使用 slashed-zero 工具強制在支援的字體中使用帶斜線的零
0
<p class="slashed-zero ...">0</p>使用等高數字
使用 lining-nums 工具在支援的字體中使用以基線對齊的數字符號
1234567890
<p class="lining-nums ...">1234567890</p>使用舊式數字
使用 oldstyle-nums 工具在支援的字體中使用一些數字有下緣的數字符號
1234567890
<p class="oldstyle-nums ...">1234567890</p>使用比例數字
使用 proportional-nums 工具在支援的字體中使用具有比例寬度的數字符號
12121
90909
<p class="proportional-nums ...">12121</p><p class="proportional-nums ...">90909</p>使用表格數字
使用 tabular-nums 工具在支援的字體中使用具有統一/表格寬度的數字符號
12121
90909
<p class="tabular-nums ...">12121</p><p class="tabular-nums ...">90909</p>使用對角分數
使用 diagonal-fractions 工具在支援的字體中將以斜線分隔的數字替換為常見的對角分數
1/2 3/4 5/6
<p class="diagonal-fractions ...">1/2 3/4 5/6</p>使用堆疊分數
使用 stacked-fractions 工具在支援的字體中將以斜線分隔的數字替換為常見的堆疊分數
1/2 3/4 5/6
<p class="stacked-fractions ...">1/2 3/4 5/6</p>堆疊多個工具
font-variant-numeric 工具是可組合的，因此您可以通過組合它們來啟用多個變體
- 小計
- $100.00
- 稅
- $14.50
- 總計
- $114.50
<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: 這樣的斷點變體，僅在中等 螢幕尺寸及以上時套用工具
<p class="proportional-nums md:tabular-nums ..."> <!-- ... --></p>在變體文件中了解有關使用變體的更多資訊。
