font-stretch

  • Revision slug: CSS/font-stretch
  • Revision title: font-stretch
  • Revision id: 19304
  • Created:
  • Creator: BijuGC
  • Is current revision? No
  • Comment new page

Revision Content

{{template.CSSRef()}}

Summary

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

Syntax

With absolute keyword values
font-stretch: normal ;
font-stretch: {{mediawiki.external('<code>ultra-condensed</code> | <code>extra-condensed</code> | <code>condensed</code> | <code>semi-condensed</code>')}} ;
font-stretch: {{mediawiki.external('<code>semi-expanded</code> | <code>expanded</code> | <code>extra-expanded</code> | <code>ultra-expanded</code>')}} ;
With relative keyword values
font-stretch: {{mediawiki.external('<code>wider</code> | <code>narrower</code>')}} ;

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
Relative keyword 'wider' sets the value of font face to the next expanded value above the inherited value. (but not expanded than ultra-expanded)
narrower
Relative keyword 'narrower' sets the value of font face to the next condensed value below the inherited value. (but not condensed than ultra-condensed)

Examples

{{template.CSSRefExampleLink("font-style")}} (FIXME)

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

Notes

WARNING: This CSS property is NOT YET IMPLEMENTED, see Bug 3512 for latest status of the enhancement request.

Specifications

Browser compatibility

See also

{{wiki.template('CSS_Reference:Fonts')}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The <b>font-stretch</b> property selects a normal, condensed, or extended face from a font family.  
</p>
<ul><li> <a href="en/CSS/initial_value">Initial value</a>: <code>normal</code> 
</li><li> Applies to: all elements
</li><li> <a href="en/CSS/inherited_and_non-inherited_properties">Inherited</a>: Yes
</li><li> Percentages: N/A
</li><li> Media: <a href="en/CSS/Media/Visual">Visual</a>
</li><li> <a href="en/CSS/computed_value">Computed value</a>: specified value (except for initial and inherit)
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<dl><dt>With absolute keyword values</dt><dd>
</dd><dd><code>font-stretch:</code> <code>normal</code> ;
</dd><dd><code>font-stretch:</code> {{mediawiki.external('&lt;code&gt;ultra-condensed&lt;/code&gt; | &lt;code&gt;extra-condensed&lt;/code&gt; | &lt;code&gt;condensed&lt;/code&gt; | &lt;code&gt;semi-condensed&lt;/code&gt;')}} ;
</dd><dd><code>font-stretch:</code> {{mediawiki.external('&lt;code&gt;semi-expanded&lt;/code&gt; | &lt;code&gt;expanded&lt;/code&gt; | &lt;code&gt;extra-expanded&lt;/code&gt; | &lt;code&gt;ultra-expanded&lt;/code&gt;')}} ;
</dd></dl>
<dl><dt>With relative keyword values</dt><dd>
</dd><dd><code>font-stretch:</code> {{mediawiki.external('&lt;code&gt;wider&lt;/code&gt; | &lt;code&gt;narrower&lt;/code&gt;')}} ;
</dd></dl>
<h3 name="Values"> Values </h3>
<dl><dt>normal 
</dt><dd>Specifies a normal font face.
</dd></dl>
<dl><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></dl>
<dl><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></dl>
<dl><dt>wider
</dt><dd>Relative keyword 'wider' sets the value of font face to the next expanded value above the inherited value. (but not expanded than ultra-expanded)
</dd></dl>
<dl><dt>narrower
</dt><dd>Relative keyword 'narrower' sets the value of font face to the next condensed value below the inherited value. (but not condensed than ultra-condensed)
</dd></dl>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("font-style")}} (FIXME)
</p>
<pre>h1 { font-stretch: extra-expanded }
p { font-stretch: narrower}
</pre>
<h3 name="Notes"> Notes </h3>
<p><b>WARNING:</b> This CSS property is <b>NOT YET IMPLEMENTED</b>, 
see <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=3512">Bug 3512</a>
for latest status of the enhancement request.
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li><a class="external" href="http://www.w3.org/TR/CSS2/fonts.html#propdef-font-stretch">CSS 2 fonts</a>
</li><li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-stretch">CSS 3 fonts</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<h3 name="See_also"> See also </h3>
<p>{{wiki.template('CSS_Reference:Fonts')}}
</p>
Revert to this revision