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: 将数字转换为序数格式，如 1st, 2nd, 3rd 等。
• slashed-zero: 将零字符（0）斜杠加以区分，实现更好的可读性。
• lining-nums: 显示所有数字为等高字母。
• oldstyle-nums: 显示数字与文本同一样式，高低不一、偏斜较大。
• proportional-nums: 显示数字与文本同一样式，高低一致，但字符宽度不同。
• tabular-nums: 显示数字等宽且对齐，对于需要排版的页面非常有用。
• diagonal-fractions: 显示数字带斜线的分数形式。
• stacked-fractions: 显示数字堆叠的分数形式。

示例

/* 将数字转换为序数格式 */
h1 {
  font-variant-numeric: ordinal;
}

/* 显示所有数字为等高字母 */
body {
  font-variant-numeric: lining-nums;
}

/* 显示数字等宽且对齐 */
table {
  font-variant-numeric: tabular-nums;
}

浏览器兼容性

font-variant-numeric 属性目前仅在一些现代浏览器中得到支持。建议在使用它时进行适当的兼容性测试和后备方案。

资源

• CSS font-variant-numeric Property - w3schools.com
• CSS Font-variant Property - MDN web docs