Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

font-variant-caps

Our volunteers haven't translated this article into Tiếng Việt yet. Join us and help get the job done!

 

Summary

The font-variant-caps CSS property controls the usage of alternate glyphs for capital letters. Scripts can have capital letter glyphs of different sizes, the normal uppercase glyphs, small capital glyphs, and petite capital glyphs. This property controls which alternate glyphs to use.

If petite capital glyphs are not present in the font, small capital glyphs are used. If these are not present, the browser synthesizes them from the uppercase glyphs. Note that some caseless characters, like punctuation marks, may have such special glyphs: they are designed to better match the characters around them. Nevertheless synthetic small capitals glyphs are never synthesized for caseless character.

The values takes into account language-specific case mapping rules, like:
  • In Turkic languages, like Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/I.
  • In German (de), the ß becomes SS in uppercase.
  • In Greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). Also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel (άι/ΑΪ).

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

/* Global values */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset;

Values

normal
This keyword leads to the deactivation of the use of such alternate glyphs.
small-caps
This keyword forces the use of small capitals letters for lower case characters. It corresponds to the OpenType value smcp; if the font doesn't support them, it synthesizes the glyphs.
all-small-caps
This keyword forces the use of small capital letters for lower case characters. It corresponds to the OpenType values smcp and c2sc; if the font doesn't support them, it synthesizes the glyphs.
petite-caps
This keyword forces the use of petite capital letters for lower case characters. It corresponds to the OpenType value pcap; if the font doesn't support them, small caps glyphs are used instead.
all-petite-caps
This keyword forces the use of petite capital letters for lower case characters. It corresponds to the OpenType values pcap and c2pc; if the font doesn't support them, small caps glyphs are used instead.
unicase
This keyword forces the use of small capital letters for upper case characters. It corresponds to the OpenType value unic; if the font doesn't support them, small caps glyphs are used for the upper case characters instead.
titling-caps
This keyword forces the use of special capitals for titling, for both lower and uppercase letters. Regular uppercase glyphs are usually designed to be rendered with lowercase glyphs: they tend to appear too bold when a long run of text use such glyphs. The special glyphs used here are designed not to produce this effect. This keyword corresponds to the OpenType value titl; if the font doesn't support it, the keyword has no visible action.

Formal syntax

normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps

Examples

<p class="smallC" >Firefox rocks, small caps!</p>
<p class="normal" >Firefox rocks, normal caps!</p>
.smallC {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal{
  font-variant-caps: normal;
  font-style: italic;
}

Results

Specifications

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font-variant-caps' in that specification.
Candidate Recommendation Initial definition

Browser Compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 52.0 34 (34) [1] ? 39 ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support No support 52.0 34.0 (34)[1] ? 39 ? 52.0

[1] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.

Document Tags and Contributors

 Contributors to this page: jpmedley, fcard, Ruggero, Sebastianz, fscholz, tomByrer, teoli
 Last updated by: jpmedley,