📜  Tailwind CSS 字体变体数字

📅  最后修改于: 2021-08-31 08:41:17             🧑  作者: Mango

这个类接受很多 Tailwind CSS 中的值,其中所有的属性都以类的形式覆盖。它是 CSS font-variant-numeric 属性的替代品。此类用于控制替代字形的使用。这是根据单位或标记(例如数字或分数)完成的。

字体变体数字类:

  • normal-nums:使用normal-nums将消除font-variant-numeric类的每个效果。
  • ordinal:该值直接表示开放类型值,即ordn 。该术语使用特殊字形作为序数标记。
  • 斜线零:这个类斜线零使用带斜线的零,这在区分 0 和 O 时被证明非常有用。
  • lining-nums:此类对应于开放类型值,即lnum 。此关键字激活位于基线上的数字。
  • oldstyle-nums:此类对应于开放类型值,即onum 。此关键字激活一些数字有后代的数字集。
  • 比例数字:这个类激活那些不是每个数字都相同大小的规范。它的开放类型值为pnum
  • tabular-nums:这个类的开放类型值为tnum 。它激活一组数字相同大小的数字组。
  • diagonal-fractions:它的开放类型值为frac 。这会激活那些分子和分母变小并用斜线分隔的数字集。
  • stacked-fractions:它的开放类型值为 arac。这将激活分子和分母变小、堆叠并由水平线分隔的那些数字集。

句法:

...

例子:

HTML
 
 
     
 
  
 
    

        GeeksforGeeks     

      Tailwind CSS Font Variant Numeric Class      
        

lining-nums: 1234567890

           

oldstyle-nums: 1234567890

           

proportional-nums: 12121

           

proportional-nums: 90909

           

tabular-nums: 12121

           

tabular-nums: 90909

           

            diagonal-fractions: 1/2 3/4 5/6         

    
    


输出: