font-variant

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

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}} {{Cssinitial("font-variant")}}
  • Applies to all elements
  • {{Xref_cssinherited}} Yes
  • Media {{Xref_cssvisual}}
  • {{Xref_csscomputed}} specified value

Syntax

Formal syntax: {{csssyntax("font-variant")}}
font-variant: normal
font-variant: small-caps

font-variant: 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 lose 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, so check the browser compatibility table.

Examples

p {
  font-variant: small-caps;
}

Specifications

Specification Status Comment
{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}} {{Spec2('CSS3 Fonts')}} Extends the property (this is not yet reflected in this article)
{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}} {{Spec2('CSS2.1')}} No change.
{{SpecName('CSS1', '#font-variant', 'font-variant')}} {{Spec2('CSS1')}}  

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)
ßSS {{CompatUnknown}} {{CompatGeckoDesktop("1")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
iİ and ıI {{CompatNo}} {{CompatGeckoDesktop("14")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}}
Greek accented letters {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
ßSS {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
iİ and ıI {{CompatNo}} {{CompatGeckoDesktop("14")}} {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}}
Greek accented letters {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

See also

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

Revision Source

<div>
  {{CSSRef}}</div>
<h2 id="Summary">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 class="cssprop">
  <li><dfn>{{Xref_cssinitial}}</dfn> {{Cssinitial("font-variant")}}</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{Xref_cssinherited}}</dfn> Yes</li>
  <li><dfn>Media</dfn> {{Xref_cssvisual}}</li>
  <li><dfn>{{Xref_csscomputed}}</dfn> specified value</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font-variant")}}</pre>
<pre>
font-variant: normal
font-variant: small-caps

font-variant: inherit
</pre>
<h3 id="Values">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">
      <p>The <code>small-caps</code> values takes into account language-specific case mapping rules, like:</p>
      <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 lose 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, so check the <a href="/en-US/docs/CSS/text-transform#Browser_compatibility" title="https://developer.mozilla.org/en-US/docs/CSS/text-transform#Browser_compatibility">browser compatibility table</a>.</p>
    </div>
  </dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush:css">
p {
  font-variant: small-caps;
}</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}</td>
      <td>{{Spec2('CSS3 Fonts')}}</td>
      <td>Extends the property (this is not yet reflected in this article)</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS1', '#font-variant', 'font-variant')}}</td>
      <td>{{Spec2('CSS1')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<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>
      <tr>
        <td><code>ß</code> → <code>SS</code></td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoDesktop("1")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td><code>i</code> → <code>İ</code> and <code>ı</code> → <code>I</code></td>
        <td>{{CompatNo}}</td>
        <td>{{CompatGeckoDesktop("14")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td>Greek accented letters</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</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>
      <tr>
        <td><code>ß</code> → <code>SS</code></td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td><code>i</code> → <code>İ</code> and <code>ı</code> → <code>I</code></td>
        <td>{{CompatNo}}</td>
        <td>{{CompatGeckoDesktop("14")}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td>Greek accented letters</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{cssxref("text-transform")}}</li>
  <li>{{CSS_Reference:Fonts}}</li>
</ul>
Revert to this revision