CSS font-variant-numeric 属性用于控制数字、分数和序号标记的备用字形的使用。
可能的值
normal：停用备用字形的使用。
以下值中的一个或多个，以空格分隔且按任意顺序排列。
ordinalslashed-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>
