One type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The font-variant property selects that font.
In CSS2, the value could take one of two values: normal and small-caps. A value of ‘normal’ selects a font that is not a small-caps font, ‘small-caps’ selects a small-caps font. If the font does not have a small-caps variation, it is acceptable (but not required) if the small-caps font is a created by taking a normal font and replacing the lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as replacement for a small-caps font.
The result of the font variation is also affected by the value of the text-transform property.
If the value of the font-variant property is set to small-caps thenIf the value of the text-transform property is set to uppercase then all characters will be displayed in normal uppercase letters.
If the value of the font-variant property is set to small-caps thenIf the value of the text-transform property is set to lowercase then all characters will be displayed in low-caps.
The font-variant property also accepts a value of inherit, which allows the element to inherit the font variant value of its parent.
Trivia & Notes
The small-caps value of the font-variant property does not override the uppercasing set in the source code of the element. So, if, for example, you have a paragraph written in all-uppercase letters in the source code, and then you set font-variant: small-caps, the font will be rendered as regular uppercase and not small-caps.
In CSS3, the font-variant property has been extended—it becomes a shorthand for a list of font variant sub-properties such as font-variant-ligatures, font-variant-position, font-variant-caps, font-variant-numeric, font-variant-alternates, and others.
Official Syntax
-
Syntax:
font-variant: normal | small-caps | inherit
- Initial: normal
- Applies To: all elements
- Animatable: no
Notes
In CSS3, the official syntax changes to include all the property’s sub-properties and their values.
Values
- normal
- Selects the font that is not small-caps.
- small-caps
- Selects the small-caps font. If the font does not have a small-caps variation, some browsers will simulate a small-caps font by taking a normal font and replacing the lower case letters by scaled uppercase characters.
- inherit
-
The value of the
font-variantproperty is inherited from thefont-variantproperty value of the element’s ancestor.
Notes
In CSS3, new values are introduced such as all-small-caps, unicase, titling-caps, and petite-caps, among others. None of those values are currently supported in any browser.
Examples
p {
font-family: "Verdana", sans-serif;
font-variant: small-caps;
}
h2 {
font-variant: inherit;
}
Browser Support
The small-caps value of the font-variant property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
The new values added in CSS3 have have no browser support at this time (February 2014).
Notes
In versions 6 and 7 of Internet Explorer, setting font-variant: small-caps will cause any text set to text-transform: uppercase or text-transform: lowercase to appear like text-transform: none.
