如何通过CSS在文本中实现小型数字（Text figures）？

维基百科将这类数字称为Text figures（小型数字），它们能提升文本可读性——常规尺寸的数字往往比其他文本更突出，在小型大写（small-caps）文本里尤其违和。

要实现这个效果，你可以使用CSS的font-variant-numeric: oldstyle-nums;属性，它会让数字采用与小写字母基线对齐的旧式（小型）样式，完美适配小型大写文本或普通正文。

修改你的示例代码如下： #

CSS 代码

.smallcaps {
  font-variant: small-caps;
  /* 给小型大写文本启用小型数字 */
  font-variant-numeric: oldstyle-nums;
}

/* 可选：给普通文本单独设置小型数字的类 */
.text-figures {
  font-variant-numeric: oldstyle-nums;
}

HTML 代码

<p class="smallcaps">Example smallcaps 1337 text.</p>
<p class="text-figures">Another text with 42 numbers in it.</p>

注意事项 #

• 这个属性依赖字体本身对旧式数字的支持，大部分专业印刷字体（比如Georgia、Palatino）和现代无衬线字体（比如Roboto）都包含该样式；如果字体不支持，浏览器会自动回退到默认数字样式。

内容的提问来源于stack exchange，提问作者Joeytje50