font-variant-numeric CSS 属性用于控制数字、分数和序数标记的替代字形的使用。
属性值
normal:停用备用字形的使用。
以下一个或多个值，以空格分隔且顺序任意。
ordinal
slashed-zero
<numeric-figure-value>:控制用于数字的数字。
lined-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>