font-variant-numeric

翻译不完整。 请帮助我们翻译这篇文章!

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 typediscrete

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-variant-numericChrome Full support 52Edge Full support 79Firefox Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 39Safari Full support 9.1WebView Android Full support 52Chrome Android Full support 52Firefox Android Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 41Safari iOS Full support 9.3Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.