font-variant

  • Revision slug: CSS/font-variant
  • Revision title: font-variant
  • Revision id: 26669
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 186 words added

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 Dutch (nl), the ij digraph becomes IJ, even in the text-transform: capitalize case which only put the first letter of a word 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 }

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() }}

Specifications

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>
<h3>Summary</h3>
<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>
<h3>Syntax</h3>
<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 Dutch (nl), the <code>ij</code> digraph becomes <code>IJ</code>, even in the <code>text-transform: capitalize</code> case which only put the first letter of a word 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><h3>Examples</h3>
<pre>p { font-variant: small-caps }</pre>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<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>
<h3>Specifications</h3>
<ul> <li><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 Fonts #font-variant</a></li>
</ul>
<h3>See also</h3>
<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