MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 26672 of font-variant

  • Revision slug: CSS/font-variant
  • Revision title: font-variant
  • Revision id: 26672
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 34 words added, 5 words removed

Revision Content

{{ CSSRef() }}

Summary

The font-variant CSS property selects a normal, or small-caps face from a font family. Setting font-variant is also possible by using the {{ cssxref("font") }} shorthand.

  • {{ Xref_cssinitial() }}: {{ Cssxref("normal") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: Yes
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: specified value

Syntax

font-variant:  normal | small-caps | {{ cssxref("inherit") }}

Values

normal
Specifies a normal font face.
small-caps
Specifies a font that is labeled as a small-caps font. If a small-caps font is not available, Mozilla (Firefox) and other browsers will simulate a small-caps font, i.e. by taking a normal font and replacing the lowercase letters by scaled uppercase characters.
The small-caps 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 (gr), accented letters loose their accent when capitalized (ά/Α) and first-vowel accented diphthongs transforms both the accent and its position (άι/ΑΪ).

The language is defined by the lang HTML attribute or the xml:lang XML attribute.

Support for these specific cases vary from one browser to the other, check the browser compatibility table.

Examples

p { font-variant: small-caps }

Specifications

Specification Status Comment
CSS Fonts Level 3 {{ Spec2('CSS3 Fonts') }} Completely extends the property (this is not yet reflected in this article)
CSS 2.1 {{ Spec2('CSS2.1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • {{ cssxref("text-transform") }}
  • {{ CSS_Reference:Fonts() }}

{{ languages( { "es": "es/CSS/font-variant", "fr": "fr/CSS/font-variant", "pl": "pl/CSS/font-variant" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The<code> font-variant </code>CSS property selects a<code> normal</code>, or<code> small-caps </code>face from a font family. Setting<code> font-variant </code>is also possible by using the {{ cssxref("font") }} shorthand.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("normal") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: Yes</li> <li>Percentages: N/A</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: specified value</li>
</ul>
<h2>Syntax</h2>
<pre class="eval">font-variant:  normal | small-caps | {{ cssxref("inherit") }}
</pre>
<h3>Values</h3>
<dl> <dt>normal</dt> <dd>Specifies a normal font face.</dd> <dt>small-caps</dt> <dd>Specifies a font that is labeled as a small-caps font. If a small-caps font is not available, Mozilla (Firefox) and other browsers will simulate a small-caps font, i.e. by taking a normal font and replacing the lowercase letters by scaled uppercase characters. <div class="note">The <code>small-caps</code> values takes into account language-specific case mapping rules, like: <ul> <li>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: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</li> <li>in German (de), the <code>ß</code> becomes <code>SS</code> in uppercase.</li> <li>in Greek (gr), accented letters loose their accent when capitalized (<code>ά</code>/<code>Α</code>) and first-vowel accented diphthongs transforms both the accent and its position (<code>άι</code>/<code>ΑΪ</code>).</li> </ul> <p>The language is defined by the <code>lang</code> HTML attribute or the <code>xml:lang</code> XML attribute.</p> <p>Support for these specific cases vary from one browser to the other, check the <a href="/en/CSS/text-transform#Browser_compatibility" title="https://developer.mozilla.org/en/CSS/text-transform#Browser_compatibility">browser compatibility table</a>.</p> </div> </dd>
</dl><h2>Examples</h2>
<pre>p { font-variant: small-caps }</pre>
<h2>Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://dev.w3.org/csswg/css3-fonts/#font-rend-desc" title="http://dev.w3.org/csswg/css3-fonts/#font-rend-desc">CSS Fonts Level 3</a></td> <td>{{ Spec2('CSS3 Fonts') }}</td> <td>Completely extends the property (this is not yet reflected in this article)</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#small-caps" title="http://www.w3.org/TR/CSS21/fonts.html#small-caps">CSS 2.1</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td> </td> </tr> </tbody>
</table>
<h2 name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>4.0</td> <td>3.5</td> <td>1.0 (85)</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2>See also</h2>
<ul> <li>{{ cssxref("text-transform") }}</li> <li>{{ CSS_Reference:Fonts() }}</li>
</ul>
<p>{{ languages( { "es": "es/CSS/font-variant", "fr": "fr/CSS/font-variant", "pl": "pl/CSS/font-variant" } ) }}</p>
Revert to this revision