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>

列印頁面