Font stretch

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.

ValueDescription
normal
widerrelative to the inherit value
narrowerrelative to the inherit value
ultra-condensed | extra-condensed | condensed | semi-condensed
semi-expanded | expanded | extra-expanded | ultra-expanded
inheritinherited 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>
Related Tutorial
1. Fonts
8. Font