Manuales 
font-stretch 3xb7
The font-stretch property allows us to select a normal, condensed, or expanded font face from a font family. These are referred to as “widths” of a font. 4s2v3i
Most font families come packed with different font faces. The different CSS font properties allow us to select font faces from a list of available faces in a font family.
The width of the font face can be chosen using one of nine possible keywords in CSS: normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, and ultra-expanded.
Nonetheless, not all font families come with corresponding faces for each of the above widths. When a face does not exist for a given width, normal or condensed values map to a narrower face, otherwise a wider face. Conversely, expanded values map to a wider face, otherwise a narrower face. The figure below shows how the nine font-stretch property settings affect font selection for font family containing a variety of widths, grey indicates a width for which no face exists and a different width is substituted:
If a font family does not have any condensed or expanded faces, the value of the font-stretch property will not have any effect, as the resulting font face chosen will be the one available face only for all values.
The font-stretch property does not change the shape or geometry of a font. It is only used to select one of any available font faces that match the value provided to the property.
Official Syntax 55184y
- Syntax:
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
- Initial: normal
- Applies To: all elements
- Animatable: yes, as a font-stretch (see note below)
Notes z5jo
Animation of font stretch: Font stretch is interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers. The interpolation result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value in the list of values mentioned above.
Values 584j31
- normal
- Chooses the normal font face which is neither condensed nor expanded.
- ultra-condensed, extra-condensed, condensed, semi-condensed
- Chooses a font face that is “condensed”, which means that it is narrower than the normal font face. Ultra-condensed is the narrowest of the narrow faces.
- semi-expanded, expanded, extra-expanded, ultra-expanded
- Chooses a font face which is “condensed”, which means that it is wider than the normal font face. Ultra-expanded is the widest of the expanded faces.
Notes z5jo
The resulting chosen face of each of the values depends on whether the font family has a face with the specified with or not. If it does not have one, the values are mapped to the closest widths as mentioned in the previous sections.
Examples 3e5p5z
font-stretch: condensed;
font-stretch: ultra-expanded;
font-stretch: normal;
font-stretch: semi-condensed;
Browser k5t66
The font-stretch property is currently only ed in Firefox 9+ and Internet Explorer 9+. (November 4th, 2014)