font-variant-numeric
Try it
font-variant-numeric
CSS 属性控制数字,分数和序号标记的替代字形的使用。
语法
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
- 启用序数形式显示。对序号标记强制启用特殊字形,如英文中的 1st,2nd,3rd,4th ,意大利文中的 1a。等同于 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