CSS - font-variant-numeric 属性_CSS 菜鸟教程

CSS font-variant-numeric 属性用于控制数字、分数和序号标记的备用字形的使用。

可能的值

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>

<< CSS - font-variant-ligatures 属性 CSS - font-variant-position 属性 >>