如何在文本中有小数字(文字数字)？

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: oldstylenums选择这些字体。参考见https://www.w3.org/TR/css-fonts-4/#font-variant-numeric-prop。

Answer 2

可以使用css 字号属性和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>

​