font-variant:small-caps; vs text-transform:capitalize;

in css what is the difference between font-variant:small-caps; and text-transform:ca开发者_Python百科pitalize;

if you use text-transform: capitalize the word "stack overflow" will become "Stack Overflow", only the 1st letter of each word gets CAPS.

but if you use font-variant: small-caps the 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ᴠᴇʀғʟᴏᴡ)

and text-transform: uppercase makes it all CAPS too but but the typeface stays the same size, so uppercase typeface will be bigger that small-caps

Uppercase is text consisting of normal uppercase characters:

UPPERCASE

Small-caps is like so (taken from here):

Wikipedia article on Small caps

text-transform is buggy in some browsers: See here.

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.

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.

To mimic this with CSS you can use font-variant: small-caps;.

When you use this with a custom font-face (initiated with @font-face), it sometimes goes wrong.

Try adding a text-transform: lowercase; before you add the font-variant:

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