正如维基百科所说,Text figures有时会让文本更具可读性.正常大小的数字通常比文本的其他部分突出得多.尤其是在使用小写字母的文本中,大写数字不太适合.如何使用css在文本中使用较小的数字?

下面是我想要更小数字的一个例子:

.smallcaps {
  font-variant: small-caps;
}
<p class="smallcaps">Example smallcaps 1337 text.</p>
<p>Another text with 42 numbers in it.</p>

推荐答案

你所要求的东西有时被称为"小写数字",但在印刷工中,最常被称为"旧式数字"或"旧式数字".在OpenType中,它们就是这样称呼的.

默认情况下,一些字体支持旧样式的数字,而另一些字体则支持它们作为替代字形.在支持它们作为替代字形的OpenType字体中,可以通过激活'onum' feature来 Select 它们.

在css中,当通过‘onum’功能使用支持老式图形的字体时,可以使用font-variant-numeric: oldstylenums进行 Select .请参见https://www.w3.org/TR/css-fonts-4/#font-variant-numeric-prop以供参考.

Html相关问答推荐

CSS复选框并排

<;img>;和具有负边距的元素的堆叠顺序

如何防止可见的滑动抽屉,同时转移HTML方向?

页脚与主要内容重叠

我希望创建一个对角手风琴与不同的内容(文本和图像)在其正常状态和其他元素悬停

在弹性框布局中的第n个元素后强制换行

渐变进度条位置

Chatbox底部显示新消息,并向上推送旧消息

如何在ASP.NET Core中添加换行符

如何将多个类名组合到CSS中的一个关键帧

在屏幕上每行 css 中的特定列居中

下划线在 Bootstrap 5 导航链接下无法正常工作

如何使容器的大小适合其 position:absolute; 子元素的大小

不完整的悬停

HTML、CSS设计图像出格

如何将元素均匀分布到容器的边缘?

使用 sprite 的问题,字符 sprite 中的额外边距

如何让 Reindeer 居中

是否有一种静态方式可以根据暗模式 Select 一张或另一张图像?

无法在 css 的 body 标签中正确呈现(内联显示)