Copyright © tutorialspoint.com

# CSS - font-stretch

## Description:

The font-stretch property makes text characters wider or narrower than the font.s default character width.

## Possible Values:

- ultra-condensed: The text characters in the element will be narrowed extremely.
- extra-condensed: The text characters in the element will be narrowed significantly.
- condensed: The text characters in the element will be narrowed, more so than if the value were semi-condensed.
- semi-condensed: The text characters in the element will be slightly narrowed, making them narrower than if the value were normal.
- normal: The text characters in the element are of normal width.
- semi-expanded: The text characters in the element will be slightly widened, making them wider than if the value were normal.
- expanded: The text characters in the element will be widened, making them wider than if the value were semi-expanded.
- extra-expanded: The text characters in the element will be widened greatly, making them wider than if the value were expanded.
- ultra-expanded: The text characters in the element will be widened extremely, making them wider than if the value were extra-expanded.
- wider: The width of text characters in the element will be wider than those of their parent element.
- narrower: The width of text characters in the element will be narrower than those of their parent element.

## Applies to:

All the HTML elements

## DOM Syntax:

object.style.fontStretch="expanded";

## Example:

Here is the example using this property:

    <p style="font-stretch:ultra-expanded;">
    If this doesn't appear to work, it is likely that
    your computer doesn't have a condensed or expanded
    version of the font being used.
    </p>

This will produce following result:

If this doesn't appear to work, it is likely that your computer doesn't have a condensed or expanded version of the font being used.

To Become more comfortable - Do Online Practice

Copyright © tutorialspoint.com