就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. font-variant-numeric

在此页

font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

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;

This property can take one of two forms:

  • either the keyword value normal
  • or one or more of the other values listed below, space-separated, in any order.

值

normal

This keyword leads to the deactivation of the use of such alternate glyphs.

ordinal
This keyword forces the use of special glyphs for the ordinal markers, like 1 st , 2 nd , 3 rd , 4 th in English or a 1 a in Italian. It corresponds to the OpenType values ordn .
slashed-zero
This keyword forces the use of a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. It corresponds to the OpenType values zero .
<numeric-figure-values >
These values control the figures used for numbers. Two values are possible:
  • lining-nums activating the set of figures where numbers are all lying on the baseline. It corresponds to the OpenType values lnum .
  • oldstyle-nums activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. It corresponds to the OpenType values onum .
<numeric-spacing-values >
These values controls the sizing of figures used for numbers. Two values are possible:
  • proportional-nums activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType values pnum .
  • tabular-nums activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType values tnum .
<numeric-fraction-values >
These values controls the glyphs used to display fractions. Two values are possible:
  • diagonal-fractions activating the set of figures where the numerator and denominator are made smaller and separated by a slash. It corresponds to the OpenType values frac .
  • stacked-fractions activating the set of figures where the numerator and denominator are made smaller, stacked and separated by a horizontal line. It corresponds to the OpenType values afrc .

形式定义

初始值 normal
适用于 所有元素。它还适用于 ::first-letter and ::first-line .
继承 yes
计算值 如指定
动画类型 discrete

形式句法 

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";
}

结果

规范

规范 状态 注释
CSS Fonts Module Level 3
The definition of 'font-variant-numeric' in that specification. 		候选推荐 初始定义

浏览器兼容性

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. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
font-variant-numeric Chrome 完整支持 52 Edge 完整支持 79 Firefox 完整支持 34
完整支持 34
不支持 24 — 34 Disabled
Disabled ). To change preferences in Firefox, visit
IE 不支持 No Opera 完整支持 39 Safari 完整支持 9.1 WebView Android 完整支持 52 Chrome Android 完整支持 52 Firefox Android 完整支持 34
完整支持 34
不支持 24 — 34 Disabled
Disabled ). To change preferences in Firefox, visit
Opera Android 完整支持 41 Safari iOS 完整支持 9.3 Samsung Internet Android 完整支持 6.0

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. CSS 字体
  4. 指南
    1. OpenType font features guide
    2. Variable fonts guide
  5. At-Rules
    1. @font-face
    2. @font-feature-values
  6. 特性
    1. font
    2. font-family
    3. font-feature-settings
    4. font-kerning
    5. font-language-override
    6. font-optical-sizing
    7. font-size
    8. font-size-adjust
    9. font-smooth
    10. font-stretch
    11. font-style
    12. font-synthesis
    13. font-variant
    14. font-variant-alternates
    15. font-variant-caps
    16. font-variant-east-asian
    17. font-variant-ligatures
    18. font-variant-numeric
    19. font-variant-position
    20. font-variation-settings
    21. font-weight
    22. line-height
    23. line-height-step