The
font-stretch property is used to specify the font stretch(condensed or expanded) the browser uses to render the characters.
The values of
font-stretch are.
| Value | Description |
|---|
normal | |
wider | relative to the inherit value |
narrower | relative to the inherit value |
ultra-condensed | extra-condensed | condensed | semi-condensed | |
semi-expanded | expanded | extra-expanded | ultra-expanded | |
inherit | inherited from the parent |
example
font-stretch : narrower
font-stretch : expanded
snippet
<html>
<head>
<style>
div {font-style:normal; font-family:Arial}
</style>
</head>
<body>
<div>
<span style="font-stretch:wider">font-stretch : normal</span>
<span style="font-stretch:narrower">font-stretch : bold</span>
<span style="font-stretch:ultra-condensed">font-stretch : bolder</span>
<span style="font-stretch:condensed">font-stretch : condensed</span>
<span style="font-stretch:semi-expanded">font-stretch : semi-expanded</span>
<span style="font-stretch:expanded">font-stretch : expanded</span>
</div>
</body>
</html>
