Tailwind CSS - 數字字型變體

Tailwind CSS 數字字型變體 是一個預定義的類，用於輕鬆調整網頁上文字元素中數字樣式和變體的特定形狀、設計或表示。

Tailwind CSS 數字字型變體類

下面列出了 Tailwind CSS 類，這些類指定不同的數字字型變體樣式，以改善網頁上數字文字元素的外觀。

類	屬性
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;

Tailwind CSS 數字字型變體類的功能

normal-nums: 此類顯示常規數字，沒有任何額外的樣式，適用於一般的數字內容。
ordinal: 此類格式化數字，例如 1st、2nd、3rd 等，這有助於建立列表或排名。
slashed-zero: 此類用斜線 (Ø) 替換零 (0) 內部的常用點，使其更容易區分數字零“0”和字母“O”。
lining-nums: 此類調整數字的高度，使其與大寫字母匹配，有助於保持一致的設計呈現。
oldstyle-nums: 此類顯示高度不同的數字，通常用於段落或正文文字。
proportional-nums: 此類根據數字的寬度調整數字之間的間距，這使它們更容易閱讀。
tabular-nums: 此類以表格格式對齊數字，確保它們在列中垂直對齊。
diagonal-fractions: 此類使用斜線分隔分子和分母來顯示分數（例如 1/2、3/4）。
stacked-fractions: 此類以堆疊格式呈現分數（例如 1⁄2、3⁄4），這可以改善它們的閱讀和區分方式。

Tailwind CSS 數字變體類示例

以下是 Tailwind CSS 數字字型變體類的示例，它們允許您以多種方式設定數字文字的樣式，以改善其在網頁上的可讀性和外觀。

使用 Tailwind CSS 進行數字變體樣式設定

此示例顯示如何使用 Tailwind CSS 數字字型變體類來調整數字文字的外觀，使用預定義的類來實現不同的樣式和格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Font Variant Numeric
    </h2>

    <p class="normal-nums mb-4">
        Applying <strong>normal-nums</strong> 
        font variant: 12345
    </p>
    <p class="ordinal mb-4">
        Applying <strong>ordinal</strong> 
        font variant: 1st, 2nd, 3rd
    </p>
    <p class="slashed-zero mb-4">
        Applying <strong>slashed-zero</strong> 
        font variant: 012345Ø
    </p>
    <p class="lining-nums mb-4">
        Applying <strong>lining-nums</strong> 
        font variant: 1234567890
    </p>
    <p class="oldstyle-nums mb-4">
        Applying <strong>oldstyle-nums:</strong> 
        font variant: 1234567890
    </p>
    <p class="proportional-nums mb-4">
        Applying <strong>proportional-nums</strong> 
        font variant: 12345
    </p>
    <p class="tabular-nums mb-4">
        Applying <strong>tabular-nums</strong> 
        font variant: 12345
    </p>
    <p class="diagonal-fractions mb-4">
        Applying <strong>diagonal-fractions</strong> 
        font variant: 1/2, 3/4
    </p>
    <p class="stacked-fractions">
        Applying <strong>stacked-fractions</strong> 
        font variant: 1/2, 2/3
    </p>
</body>

</html>

列印頁面