CSS Font-Stretch Property
The font-stretch property in CSS lets us choose between a normal, expanded, or
condensed version of a font from its family. This property adjusts the text to
be wider or narrower compared to the font's default width. However, it only
works with font families that have width-variant faces.
This CSS property only applies to fonts that have additional variations, like
expanded or condensed faces. For fonts without these variations, it will have
no effect.
The nine keyword values used to select the font-face width are listed in the
following syntax.
Syntax
font-stretch:
normal/semi-condensed/condensed/extra-condensed/ultra-condensed/semi-expanded/expanded/
extra-expanded/ultra-expanded;
Property Values
The values for this CSS property are listed in the table below as follows:
Let's explain the property values above with an example.
Example
<!DOCTYPE
html>
<html>
<head>
<title>CSS font-stretch
Property</title>
<style>
body {
text-align:
center;
}
div {
font-family:
Arial, Helvetica, sans-serif;
font-size:
20px;
color:
blue;
}
.normal {
font-stretch:
normal;
}
.semi-condensed {
font-stretch:
semi-condensed;
}
.condensed {
font-stretch:
condensed;
}
.extra-condensed {
font-stretch:
extra-condensed;
}
.ultra-condensed {
font-stretch:
ultra-condensed;
}
.semi-expanded {
font-stretch:
semi-expanded;
}
.expanded {
font-stretch:
expanded;
}
.extra-expanded {
font-stretch:
extra-expanded;
}
.ultra-expanded {
font-stretch:
ultra-expanded;
}
</style>
</head>
<body>
<h1>Example of the font-stretch
property</h1>
<div
class="normal">normal</div>
<div
class="semi-condensed">semi-condensed</div>
<div
class="condensed">condensed</div>
<div
class="extra-condensed">extra-condensed</div>
<div
class="ultra-condensed">ultra-condensed</div>
<div
class="semi-expanded">semi-expanded</div>
<div
class="expanded">expanded</div>
<div
class="extra-expanded">extra-expanded</div>
<div
class="ultra-expanded">ultra-expanded</div>
</body>
</html>
Output
