font-stretch

  • Revision slug: CSS/font-stretch
  • Revision title: font-stretch
  • Revision id: 19325
  • Created:
  • Creator: southernroutes
  • Is current revision? No
  • Comment 8 words added, 8 words removed

Revision Content

{{ CSSRef() }}

Summary

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

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

Syntax

font-stretch:  inherit | 
               ultra-condensed | extra-condensed | condensed | semi-condensed |
               normal | semi-expanded | expanded | extra-expanded | ultra-expanded |
               wider | narrower

Values

normal
Specifies a normal font face.
semi-condensed, condensed, extra-condensed, ultra-condensed
Specifies a font face condensed than normal, with ultra-condensed as the most condensed.
semi-expanded, expanded, extra-expanded, ultra-expanded
Specifies a font face expanded than normal, with ultra-expanded as the most expanded.
wider, narrower 
Relative values. wider and narrower indicate values relative to the values of the parent element.  
{{ deprecatedGeneric("inline","CSS3") }}

Examples

h1 { font-stretch: extra-expanded }
p  { font-stretch: condensed }

Specifications

font-stretch was defined in CSS 2, but dropped in CSS 2.1 due lack of implementation experience. It's newly drafted in CSS 3.

The relative values wider and narrower have been dropped from the font-stretch property in the CSS Fonts Module Level 3 Working Draft (24 March 2011).

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatNo() }} {{ CompatNo() }}
See {{ Bug("3512") }}
9.0*
*Using CSS 3 Working Draft
{{ CompatUnknown() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }}

See also

{{ CSS_Reference:Fonts() }}

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> font-stretch </code>CSS property selects a normal, condensed, or extended face from a font family.</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>font-stretch:  inherit | 
               ultra-condensed | extra-condensed | condensed | semi-condensed |
               normal | semi-expanded | expanded | extra-expanded | ultra-expanded |
               wider | narrower<br></pre>
<h3>Values</h3>
<dl> <dt>normal</dt> <dd>Specifies a normal font face.</dd> <dt>semi-condensed, condensed, extra-condensed, ultra-condensed</dt> <dd>Specifies a font face condensed than normal, with ultra-condensed as the most condensed.</dd> <dt>semi-expanded, expanded, extra-expanded, ultra-expanded</dt> <dd>Specifies a font face expanded than normal, with ultra-expanded as the most expanded.</dd> <dt>wider, narrower </dt> <dt> </dt><dd>Relative values.<code> wider </code>and<code> narrower </code>indicate values relative to the values of the parent element.  <br> {{ deprecatedGeneric("inline","CSS3") }}</dd>
</dl>
<h3>Examples</h3>
<pre>h1 { font-stretch: extra-expanded }
p  { font-stretch: condensed }
</pre>
<h3>Specifications</h3>
<p><code> font-stretch </code>was defined in CSS 2, but dropped in CSS 2.1 due lack of implementation experience. It's newly drafted in CSS 3.</p>
<p>The relative values<code> wider </code>and<code> narrower </code>have been dropped from the<code> font-stretch </code>property in the <a class=" external" href="http://www.w3.org/TR/css3-fonts/" title="http://www.w3.org/TR/css3-fonts/">CSS Fonts Module Level 3 Working Draft (24 March 2011)</a>.</p>
<ul> <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-styling" title="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-styling">CSS 2 1998-05-12 Fonts #font-styling</a> Obsolete</li> <li><a class="external" href="http://dev.w3.org/csswg/css3-fonts/#font-width-the-font-stretch-property" title="http://dev.w3.org/csswg/css3-fonts/#font-width-the-font-stretch-property">CSS 3 Fonts #font-stretch</a> Editor's draft, handle with care! </li>
</ul>
<h3>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>{{ CompatNo() }}</td> <td>{{ CompatNo() }}<br> See {{ Bug("3512") }}</td> <td>9.0*<br> *Using CSS 3 Working Draft</td> <td>{{ CompatUnknown() }}</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>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody>
</table>
</div>
<h3>See also</h3>
<p>{{ CSS_Reference:Fonts() }}</p>
<p>{{ languages( { "fr": "fr/CSS/font-stretch", "pl": "pl/CSS/font-stretch" } ) }}</p>
Revert to this revision