Tailwind CSS Font Variant Numeric

2022-08-08 10:02 更新

Font Variant Numeric

用来控制数字变形的功能类

Class
Properties
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;

使用方法

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

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

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

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

Ordinal

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


<p class="ordinal ...">1st</p>

Slashed Zero

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


<p class="slashed-zero ...">0</p>

Lining figures

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


<p class="lining-nums ...">1234567890</p>

Oldstyle figures

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


<p class="oldstyle-nums ...">1234567890</p>

Proportional figures

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


<p class="proportional-nums ...">12121</p>
<p class="proportional-nums ...">90909</p>

Tabular figures

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


<p class="tabular-nums ...">12121</p>
<p class="tabular-nums ...">90909</p>

Diagonal fractions

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


<p class="diagonal-fractions ...">1/2 3/4 5/6</p>

Stacked fractions

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


<p class="stacked-fractions ...">1/2 3/4 5/6</p>

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 ​属性设置为 ​false ​来完全禁用它们:

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号