font-stretch

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

Revision Content

{{ CSSRef() }}

Summary

The font-stretch CSS property selects a normal, condensed, or expanded face from a font family.

Note: This property does not change the geometry of a font, stretching or shrinking it. It merely chooses the appropriate face of the font, if this one offers several of them.
  • {{ Xref_cssinitial() }} {{ Cssxref("normal") }}
  • Applies to all elements
  • {{ Xref_cssinherited() }} yes
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} specified value

Syntax

Formal syntax: ultra-condensed | extra-condensed | condensed | semi-condensed |
               normal | semi-expanded | expanded | extra-expanded | ultra-expanded
font-stretch: ultra-condensed
font-stretch: extra-condensed
font-stretch: condensed
font-stretch: semi-condensed
font-stretch: normal
font-stretch: semi-expanded
font-stretch: expanded
font-stretch: extra-expanded
font-stretch: ultra-expanded

font-stretch: inherit

Values

normal
Specifies a normal font face.
semi-condensed, condensed, extra-condensed, ultra-condensed
Specifies a font face more condensed than normal, with ultra-condensed as the most condensed.
semi-expanded, expanded, extra-expanded, ultra-expanded
Specifies a font face more expanded than normal, with ultra-expanded as the most expanded.
h1 { font-stretch: extra-expanded }
p  { font-stretch: condensed }

Specifications

Specification Status Comment
{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }} {{ Spec2('CSS3 Fonts') }}  

The CSS property font-stretch was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatNo() }} {{ CompatGeckoDesktop("9.0") }} 9.0 {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatGeckoMobile("9.0") }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }}

See also

  • {{ CSS_Reference:Fonts() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>font-stretch</code> CSS property selects a normal, condensed, or expanded face from a font family.</p>
<div class="note">
  <strong>Note:</strong><strong> </strong>This property does not change the geometry of a font, stretching or shrinking it. It merely chooses the appropriate <em>face</em> of the font, if this one offers several of them.</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{ Cssxref("normal") }}</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">
Formal syntax: ultra-condensed | extra-condensed | condensed | semi-condensed |
               normal | semi-expanded | expanded | extra-expanded | ultra-expanded
</pre>
<pre>
font-stretch: ultra-condensed
font-stretch: extra-condensed
font-stretch: condensed
font-stretch: semi-condensed
font-stretch: normal
font-stretch: semi-expanded
font-stretch: expanded
font-stretch: extra-expanded
font-stretch: ultra-expanded

font-stretch: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>normal</code></dt>
  <dd>
    Specifies a normal font face.</dd>
  <dt>
    <code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
  <dd>
    Specifies a font face more condensed than normal, with ultra-condensed as the most condensed.</dd>
  <dt>
    <code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
  <dd>
    Specifies a font face more expanded than normal, with ultra-expanded as the most expanded.</dd>
</dl>
<pre>
h1 { font-stretch: extra-expanded }
p  { font-stretch: condensed }
</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-stretch', 'font-stretch') }}</td>
      <td>{{ Spec2('CSS3 Fonts') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>The CSS property <code>font-stretch</code> was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.</p>
<h2 id="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>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("9.0") }}</td>
        <td>9.0</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>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("9.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Fonts() }}</li>
</ul>
Revert to this revision