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>
广告