font-variant-numeric - CSS（层叠样式表） 编辑

font-variant-numeric CSS 属性控制数字，分数和序号标记的替代字形的使用。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

语法

font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums;         /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */
font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;

/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: unset;

此属性以以下两种方式之一指定：

• 关键字值 normal
• 或下列的一个或多个其他值，按任意顺序排列并以空格分隔。

值

normal

下列特性均不启用。

ordinal

启用序数形式显示。对序号标记强制启用特殊字形，如英文中的 1^st，2^nd，3^rd，4^th ，意大利文中的 1^a。等同于 OpenType 特性 ordn。

slashed-zero

启用区分零显示。强制使用带有斜杠的 0；常用于区分 O 和 0。等同于 OpenType 特性 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。

Formal definition

初始值	normal
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	yes
计算值	as specified
Animation type	discrete

Formal syntax

normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
where 
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]

示例

Setting ordinal numeric forms

HTML

<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>

CSS

/*
This example uses the Source Sans Pro OpenType font, developed by Adobe
and used here under the terms of the SIL Open Font License, Version 1.1:
http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
*/

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
}

.ordinal {
  font-variant-numeric: ordinal;
  font-family: "Source Sans Pro";
}

Result

规范

Specification	Status	Comment
CSS Fonts Module Level 3 font-variant-numeric	Recommendation	Initial definition

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.