font-variant-numeric

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

试一试

语法

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: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;

此属性可以采用以下两种形式之一

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

值

normal

此关键字会导致停用此类备用字形的用法。

ordinal

此关键字强制使用序数标记的特殊字形，例如英语中的 1st、2nd、3rd、4th 或意大利语中的 a 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。

正式定义

初始值normal
应用于所有元素和文本。它也适用于 ::first-letter 和 ::first-line。
继承是
计算值如指定
动画类型离散

正式语法

font-variant-numeric = 
  normal                                              |
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]  

<numeric-figure-values> = 
  lining-nums    |
  oldstyle-nums  

<numeric-spacing-values> = 
  proportional-nums  |
  tabular-nums       

<numeric-fraction-values> = 
  diagonal-fractions  |
  stacked-fractions

示例

设置序数数字形式

规范

规范
CSS 字体模块级别 4
# font-variant-numeric-prop

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅