Font Variant Numeric

使用方法

使用 font-variant-numeric 功能类为数字、分数和序号标记启用其他字形（在支持它们的字体中）。

这些功能类是可组合的，因此您可以通过组合 HTML 中的多个类来实现多个 font-variant-numeric 功能。

<p class="ordinal slashed-zero tabular-nums ...">1234567890</p>

请注意，很多字体不支持这些功能*（例如，对堆叠分数的支持特别少见），因此，根据您所使用的字体序列，其中的一些功能类可能无效。

Ordinal

使用 ordinal 功能类来为序数标记启用特殊字形。

Slashed Zero

使用 slashed-zero 功能强制为 0 加上一个短杠。当您需要明确区分 O 和 0 时，这很有用。

Lining figures

使用 lining-nums 功能类来使用所有按其基线对齐的数字字形。这对应于 lnum OpenType功能。这是大多数字体的默认值。

Oldstyle figures

使用 oldstyle-nums 功能类来使用其中一些数字有降格的数字字形。这对应于 onum OpenType功能。

Proportional figures

使用 proportional-nums 功能类来使用具有比例宽度（而不是统一/表格）的数字字形。这对应于 pnum OpenType功能。

Tabular figures

使用 tabular-nums 功能类来使用具有统一/表格宽度（而不是比例）的数字字形。这与 tnum OpenType功能相对应。

Diagonal fractions

使用 diagonal-fractions 功能类，用普通的对角线分数替换被斜线分隔的数字。这对应于 frac OpenType功能。

Stacked fractions

使用 stacked-fractions 功能类，用常见的堆叠分数替换用斜线分隔的数字。这对应于 frac OpenType功能。似乎很少有字体支持这个功能--我们在这里使用的是 Ubuntu Mono。

Resetting numeric font variants

使用 normal-nums 属性重置数字字体变形。这通常对在特定断点处重置字体特征很有用。

<p class="slashed-zero tabular-nums md:normal-nums ...">12345</p>

响应式

要在特定的断点处控制元素的 font-variant-numeric 属性，请在任何现有的 font-variant-numeric 功能类前添加 {screen}: 前缀。例如，使用 md:tabular-nums 来仅在中等大小及以上的屏幕应用 tabular-nums 功能类。

<div class="proportional-nums md:tabular-nums">
  <!-- ... -->
</div>

关于 Tailwind 的响应式设计功能的更多信息，请查看 响应式设计 文档。

定制

变体

默认情况下， 针对 font variant numeric 功能类，只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 fontVariantNumeric 属性来控制为 font variant numeric 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       fontVariantNumeric: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 font variant numeric 功能，您可以通过在配置文件的 corePlugins 部分将 fontVariantNumeric property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     fontVariantNumeric: false,
    }
  }