CSS 字体变体：小型大写字母；vs 文本转换：大写；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2438122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
font-variant:small-caps; vs text-transform:capitalize;
提问by Jitendra Vyas
in css what is the difference between font-variant:small-caps;and text-transform:capitalize;
在CSS之间有什么区别font-variant:small-caps;和text-transform:capitalize;
回答by pixeltocode
if you use text-transform: capitalizethe word "stack overflow" will become "Stack Overflow", only the 1st letter of each word gets CAPS.
如果使用text-transform: capitalize“stack overflow”这个词就会变成“Stack Overflow”，只有每个词的第一个字母大写。
but if you use font-variant: small-capsthe word "stack overflow" becomes "STACK OVERFLOW" but the height of the type-face will match the height of the lowercase letters before the CSS style was applied. so all CAPS but smaller. (S???? O???????)
但是如果你使用font-variant: small-caps“堆栈溢出”这个词会变成“堆栈溢出”，但字体的高度将在应用 CSS 样式之前匹配小写字母的高度。所以全部大写，但更小。（所以？？？？？？？）
and text-transform: uppercasemakes it all CAPS too but but the typeface stays the same size, so uppercasetypeface will be bigger that small-caps
并text-transform: uppercase使其全部大写，但字体保持相同的大小，因此uppercase字体会更大small-caps
回答by Pekka
Uppercase is text consisting of normal uppercase characters:
大写是由普通大写字符组成的文本：
UPPERCASE
大写
Small-caps is like so (taken from here):
Small-caps 是这样的（取自这里）：
Wikipedia article on Small caps
text-transformis buggy in some browsers: See here.
text-transform在某些浏览器中存在问题：请参见此处。
For example:
例如：
In Internet Explorer for Windows versions up to and including 7, the values lowercase and uppercase behave like none if the font-variant property is set to small-caps.
在适用于 Windows 版本（包括 7）的 Internet Explorer 中，如果 font-variant 属性设置为小型大写字母，则小写和大写值的行为类似于无。
回答by Toon
In regular Typography there is a huge difference in small-caps and uppercase, as stated by one of the contributors in this forum. Small-caps are capitalised characters with an x-height (almost) equal to lowercase characters.
正如本论坛的一位贡献者所说，在常规排版中，小写字母和大写字母存在巨大差异。Small-caps 是大写字符，x 高度（几乎）等于小写字符。
To mimic this with CSS you can use font-variant: small-caps;.
要使用 CSS 模仿这一点，您可以使用font-variant: small-caps;.
When you use this with a custom font-face (initiated with @font-face), it sometimes goes wrong.
当您将它与自定义字体（以 开头@font-face）一起使用时，它有时会出错。
Try adding a text-transform: lowercase;before you add the font-variant:
text-transform: lowercase;在添加之前尝试添加font-variant：
.smallcaps {
text-transform: lowercase;
font-variant: small-caps;
}
