css 中的小型大写字体将数字处理为大写字母

Question

我正在设计一个网站，我想使用字体变体作为小型大写字母。问题是当我在句子中的任何地方有一个数字时，它被视为大写字母并且比句子的其余部分更大。

我该怎么办？我应该更改 font-variant-numeric 中的内容吗？

font-family: Montserrat;
font-style: normal;
font-variant: small-caps;
font-variant-numeric: normal;

Answer 1

那是因为数字不是字母，因此既没有大写字母也没有小型大写字母。

如果您 100% 想要获得与小型大写字母大小相同的数字，则您将不得不手动使用不同的文本大小。有点像这样：

.c1{
font-family: Montserrat;
font-style: normal;
font-variant: small-caps;
font-variant-numeric: normal;
font-size: 20px;
}

span {
 font-size: 12px; 
}

<div class="c1">
Hello, <span>3</span> and <span>4</span> are numbers.
</div>

css 中的小型大写字体将数字处理为大写字母

small-caps font in css handles numbers as capital letters

css

fonts