mozilla

Revision 19327 of font-stretch

  • Revision slug: CSS/font-stretch
  • Revision title: font-stretch
  • Revision id: 19327
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 26 words added, 7 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() }} {{ CompatGeckoDesktop("9.0") }} [*] 9.0 [*] {{ CompatUnknown() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatGeckoMobile("9.0") }} [*] {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }}

[*] Implements the CSS Fonts Module Level 3 specification. Hence do not support the deprecated wider and narrower keywords.

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>{{ CompatGeckoDesktop("9.0") }} <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=3512" title="https://bugzilla.mozilla.org/show_bug.cgi?id=3512"></a> [*]</td> <td>9.0 [*]</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>{{ CompatGeckoMobile("9.0") }} <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=3512" title="https://bugzilla.mozilla.org/show_bug.cgi?id=3512"></a> [*]</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<p>[*] Implements the CSS Fonts Module Level 3 specification. Hence do not support the deprecated <strong>wider</strong> and <strong>narrower</strong> keywords.</p><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