font-variant-caps property allows the selection of alternate glyphs used for small or petite capitals or for titling.
font-variant-caps property was introduced in CSS3 for the purposes of enabling various font related features that can improve the appearance of the text on the page. It specifically deals with small caps, petite caps, unicase, and titling caps.
In CSS1 and CSS2, small caps were specified with the
font-variant property. In CSS3, that property has now become shorthand for some new CSS3 properties (including the
font-variant-caps property). The
font-variant-caps property expands the small caps usage to include other related glyphs such as petite caps, titling caps, and unicase. So you can use either
font-variant-caps to specify small caps and the other related glyphs.
The syntax of the
font-variant-caps property is:
These values are explained in more detail below.
- Specifies that none of the features below are enabled.
- Specifies that the font is rendered in small-caps (OpenType feature:
smcp). Small caps typically appear as uppercase letters but in the size of lower case letters.
Enables display of small capitals for both upper and lowercase letters (OpenType features:
With normal small caps, any uppercase character is rendered at full uppercase size, while lowercase characters are rendered smaller. However, when the
all-small-capskeyword is used, those uppercase characters are rendered at the smaller size.
Enables display of petite capitals (OpenType feature:
If the font doesn't support petite capitals, the property behaves as though
small-capshad been specified instead.
Enables display of petite capitals for both upper and lowercase letters (OpenType features:
If this keyword is used on a font that doesn't support this feature, the property behaves as though
all-small-capshad been specified instead.
Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature:
Enables display of titling capitals (OpenType feature:
Titling capitals are a variant of uppercase designed for heading and titles. The stroke width is reduced for use at larger point sizes where the stroke weight used in smaller text sizes would be too heavy.
If this is used on a font that doesn't support this feature, the property has no visible effect.
In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:
- Represents the value specified as the property's initial value.
- Represents the computed value of the property on the element's parent.
- This value acts as either
initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
- Initial Value
- Applies To
- All elements
- CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013)
For maximum browser compatibility many web developers add browser-specific properties by using extensions such as
-webkit- for Safari, Google Chrome, and Opera (newer versions),
-ms- for Internet Explorer,
-moz- for Firefox,
-o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.
This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.
The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.
Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.
You can also use Autoprefixer with preprocessors such as Less and Sass.