字体变:小型股; 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

大写是由正常大写字符组成的文本:

大写

小型股是这样的(取自这里):

替代文字

text-transform在某些浏览器中有问题:见这里.

例如:

在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;
}