字体变：小型股; vs text-transform：capitalize;

Question

在css中font-variant:small-caps;和text-transform:capitalize;

之间的区别是什么

Answer 1

如果使用text-transform: capitalize，“堆栈溢出”一词将变为“堆栈溢出”，只有每个单词的第一个字母获得CAPS。

但是如果你使用font-variant: small-caps，“堆栈溢出”这个词会变成“STACK OVERFLOW”，但是在应用CSS样式之前，type-face的高度将与小写字母的高度相匹配。所有CAPS都比较小。 （SᴛᴀᴄᴋOᴠᴇʀғʟᴏᴡ）

和text-transform: uppercase也使其全部为CAPS，但字体保持相同的大小，因此uppercase字体将大于small-caps

Answer 2

大写是由普通大写字符组成的文本：

大写

小型股就是这样（取自here）：

Wikipedia article on Small caps

text-transform在某些浏览器中存在错误：请参阅here。

例如：

  

在Internet Explorer for Windows版本中，包括7，如果font-variant属性设置为small-caps，则小写和大写的值表现为none。

Answer 3

在常规排版中，小型大写字母和大写字母存在巨大差异，正如本论坛的一位撰稿人所说。小型大写字母是大写字符，x高度（几乎）等于小写字符。

要使用CSS模仿，您可以使用font-variant: small-caps;。

当您使用自定义font-face（以@font-face启动）时，它有时会出错。

在添加text-transform: lowercase;：

之前，请尝试添加font-variant

.smallcaps {
    text-transform: lowercase;
    font-variant: small-caps;
}