CSS font-stretch Property

CSS font-stretch Property

Whether or not to use a confenced(shrink), or expanded face from font.

Valid values are - normal, ultracondensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extraexpanded or ultra-expanded.

Syntax -

Now we will see the values with their example -

Value	Description
ultra-condensed	This makes the text as narrower
extra-condensed	This makes the text narrower than condensed.
condensed	This makes the text narrower than semi-condensed.
semi-condensed	This makes the text narrower than normal
normal	This is no font stretching, and this is the default value.
semi-expanded	This makes the text wider than normal
expanded	This makes the text wider than semi-expanded
extra-expanded	This makes the text wider than expanded
ultra-expanded	This makes the text as wide as it gets.

Now we will see the example -

Example -

<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
font-stretch: expanded;
}
h3 {
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-stretch:extra-condensed;
}
h3.two{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-stretch:extra-expanded;
}

</style>
</head>
<body>
<h1>This is the sample heading</h1>
<h3>This is font-feature-settings and thsi is the sample pera here Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, dolor. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio ipsum aut totam repellendus commodi, modi unde rem fugit non voluptatum voluptas illo.</h3>
<h3 class="two">This is font-feature-settings and thsi is the sample pera here Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, dolor. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio ipsum aut totam repellendus commodi, modi unde rem fugit non voluptatum voluptas illo.</h3>
</body>
</html>

Output -