CSS - font-variant-numeric 属性

font-variant-numeric CSS 属性用于控制数字、分数和序数标记的替代字形的用法。

可能的值

normal：禁用替代字形的用法。
一个或多个以下值，用空格分隔，顺序任意。
- ordinal (序数)
- slashed-zero (斜线零)
- <numeric-figure-values>：控制数字使用的数字。
  - lining-nums：激活将数字设置为位于基线的数字。对应于 OpenType 值 lnum。
  - oldstyle-nums：激活将数字设置为具有下沉字体的数字 (3,4,7,9)。对应于 OpenType 值 onum。
- <numeric-spacing-values>：控制数字使用的数字的大小。
  - proportional-nums：激活设置大小不相同的数字。对应于 OpenType 值 pnum。
  - tabular-nums：激活设置大小相同的数字。对应于 OpenType 值 tnum。
- <numeric-fraction-values>：控制分数使用的字形。
  - diagonal-fractions：激活设置分子和分母较小，用斜线分隔的数字。对应于 OpenType 值 frac。
  - stacked-fractions：激活设置分子和分母较小，堆叠并用水平线分隔的数字。对应于 OpenType 值 afrc。

应用于

所有 HTML 元素。

DOM 语法

object.style.fontVariantNumeric = "normal | ordinal";

CSS font-variant-numeric - 基本示例

这是一个示例

<html>
<head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source Sans Pro">
<style>
   * {
      font-family: "Source Sans Pro";
   }
   div {
      border: 1px solid red;
      margin: 5px;
      width: 200px;
   }
   p.value1 {
      font-variant-numeric: normal;
   }
   p.value2 {
      font-variant-numeric: ordinal;
   }
   p.value3 {
      font-variant-numeric: slashed-zero;
   }
   p.value4 {
      font-variant-numeric: lining-nums;
   }
   p.value5 {
      font-variant-numeric: oldstyle-nums;
   }
   p.value6 {
      font-variant-numeric: tabular-nums;
   }   
</style>
</head>
<body>
   <div>
      <h3>Normal: </h3>
      <p class="value1">1st, 2nd, 3rd, 6th</p>
   </div>
   <div>
      <h3>Ordinal: </h3>
      <p class="value2">1st, 2nd, 3rd, 6th</p>
   </div>
   <div>
      <h3>Slashes-zero: </h3>
      <p class="value3">1st, 2nd, 3rd, 6th</p>
   </div>
   <div>
      <h3>lining-nums: </h3>
      <p class="value4">1st, 2nd, 3rd, 6th</p>
   </div>
   <div>
      <h3>Oldstyle-nums: </h3>
      <p class="value5">1st, 2nd, 3rd, 6th</p>
   </div>
   <div>
      <h3>Tabular-nums: </h3>
      <p class="value6">1st, 2nd, 3rd, 6th</p>
   </div>
</body>
</html>

打印页面