/    /  CSS font-stretch

CSS font-stretch

 

The font-stretch property in CSS allows us to select a normal, expanded, or condensed face from the font’s family property.

 

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:

 

CSS font-stretch