Tailwind CSS Font Variant Numeric

2022-08-08 10:02 更新

Font Variant Numeric

用來控制數(shù)字變形的功能類

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? 功能類為數(shù)字、分?jǐn)?shù)和序號(hào)標(biāo)記啟用其他字形(在支持它們的字體中)。

這些功能類是可組合的,因此您可以通過組合 HTML 中的多個(gè)類來實(shí)現(xiàn)多個(gè) ?font-variant-numeric? 功能。

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

請(qǐng)注意,很多字體不支持這些功能*(例如,對(duì)堆疊分?jǐn)?shù)的支持特別少見),因此,根據(jù)您所使用的字體序列,其中的一些功能類可能無效。

Ordinal

使用 ?ordinal ?功能類來為序數(shù)標(biāo)記啟用特殊字形。


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

Slashed Zero

使用 ?slashed-zero? 功能強(qiáng)制為 0 加上一個(gè)短杠。當(dāng)您需要明確區(qū)分 O 和 0 時(shí),這很有用。


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

Lining figures

使用 ?lining-nums? 功能類來使用所有按其基線對(duì)齊的數(shù)字字形。這對(duì)應(yīng)于 ?lnum ?OpenType功能。這是大多數(shù)字體的默認(rèn)值。


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

Oldstyle figures

使用 ?oldstyle-nums? 功能類來使用其中一些數(shù)字有降格的數(shù)字字形。這對(duì)應(yīng)于 ?onum ?OpenType功能。


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

Proportional figures

使用 ?proportional-nums? 功能類來使用具有比例寬度(而不是統(tǒng)一/表格)的數(shù)字字形。這對(duì)應(yīng)于 ?pnum ?OpenType功能。


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

Tabular figures

使用 ?tabular-nums? 功能類來使用具有統(tǒng)一/表格寬度(而不是比例)的數(shù)字字形。這與 ?tnum ?OpenType功能相對(duì)應(yīng)。


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

Diagonal fractions

使用 ?diagonal-fractions? 功能類,用普通的對(duì)角線分?jǐn)?shù)替換被斜線分隔的數(shù)字。這對(duì)應(yīng)于 ?frac ?OpenType功能。


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

Stacked fractions

使用 ?stacked-fractions? 功能類,用常見的堆疊分?jǐn)?shù)替換用斜線分隔的數(shù)字。這對(duì)應(yīng)于 ?frac ?OpenType功能。似乎很少有字體支持這個(gè)功能—我們?cè)谶@里使用的是 Ubuntu Mono。


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

Resetting numeric font variants

使用 ?normal-nums? 屬性重置數(shù)字字體變形。這通常對(duì)在特定斷點(diǎn)處重置字體特征很有用。

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

響應(yīng)式

要在特定的斷點(diǎn)處控制元素的 ?font-variant-numeric? 屬性,請(qǐng)?jiān)谌魏维F(xiàn)有的 ?font-variant-numeric? 功能類前添加 ?{screen}:? 前綴。例如,使用 ?md:tabular-nums? 來僅在中等大小及以上的屏幕應(yīng)用 ?tabular-nums? 功能類。

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

關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息,請(qǐng)查看 響應(yīng)式設(shè)計(jì) 文檔。

自定義

變體

默認(rèn)情況下, 針對(duì) font variant numeric 功能類,只生成 responsive 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?fontVariantNumeric ?屬性來控制為 font variant numeric 功能生成哪些變體。

例如,這個(gè)配置也將生成 hover and focus 變體:

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

禁用

如果您不打算在您的項(xiàng)目中使用 font variant numeric 功能,您可以通過在配置文件的 ?corePlugins ?部分將 ?fontVariantNumeric ?屬性設(shè)置為 ?false ?來完全禁用它們:

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


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)