CSS font-variant-numeric 属性

CSS font-variant-numeric 属性定义数字的显示方式。

语法

font-variant-numeric: normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions;

属性值

• normal：默认值，使用字体的默认数字格式；
• ordinal：使用上标字母（1^st、2^nd 等）来表示序数；
• slashed-zero：使用带斜线的零，与字母 O 区别开；
• lining-nums：使用等高的数字，与大写字母等高；
• oldstyle-nums：数字有衬线，与大写字母基线对齐；
• proportional-nums：每个数字宽度不同，根据数字本身的宽度来确定宽度；
• tabular-nums：每个数字宽度相同，可以对齐成表格；
• diagonal-fractions：分数用斜线表示，如 1/2；
• stacked-fractions：分数用横线表示，如 1-2/3。

示例

body {
  font-variant-numeric: lining-nums; /* 使用等高的数字 */
}

h1 {
  font-variant-numeric: oldstyle-nums; /* 数字有衬线 */
}

p {
  font-variant-numeric: slashed-zero; /* 使用带斜线的零 */
}

table td {
  font-variant-numeric: tabular-nums; /* 可以对齐成表格 */
}

.fraction {
  font-variant-numeric: diagonal-fractions; /* 分数用斜线表示 */
}

浏览器支持

font-variant-numeric 属性在以下浏览器中得到了支持：

• Chrome：33.0+
• Firefox：43.0+
• Safari：9.1+
• Opera：20.0+
• Edge：79.0+

总结

font-variant-numeric 属性是一个用于定义数字显示方式的 CSS 属性，可以通过选择不同的值来改变数字的样式。当设计到数字的排版时，它可以帮助网页设计者实现更好的排版效果。