如何在文本中出现小数字（文字数字）？

Question

正如维基百科所称，

文本数字有时可以使文本更具可读性。正常大小的数字通常比文本的其余部分更引人注目。特别是在小写字母文本中，大数字不太合适。如何使用 CSS 在文本中显示较小的数字？

我想要较小数字的示例：

.smallcaps {
  font-variant: small-caps;
}

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

Answer 1

您所要求的有时被称为“小写数字”，但在印刷者中，最常被称为“旧式数字”或“旧式数字”。这就是它们在 OpenType 中的名称。

有些字体默认支持旧式数字，有些字体支持它们作为替代字形。在支持它们作为替代字形的 OpenType 字体中，可以通过激活 'onum' 功能来选择它们。

在 CSS 中，当使用通过“onum”功能支持旧式数字的字体时，可以使用

font-variant-numeric: oldstyle-nums

选择这些字体。请参阅 https://www.w3.org/TR/css-fonts-4/#font-variant-numeric-prop 以供参考。

Answer 2

您可以使用

css

font-size 属性和

span

标签更改文本（数字）大小。

像这样：

.smallcaps {
  font-variant: small-caps;
}

.num {
  color :red;
/*   font-size: smaller; */
/*   font-size: x-small; */
  font-size: xx-small;
}

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

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