Menu
in css what is the difference between font-variant:small-caps; and text-transform:capitalize;
625
The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
The text-transform property controls capitalization effects of an element's text.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text. The font-variant property specifies whether or not a text should be displayed in a small-caps font.
In CSS3, font-variant becomes a shorthand and can accept multiple values, including all-small-caps , petite-caps , all-petite-caps , titling-caps , and unicase , among others.
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
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
