One descriptor of the font property in CSS is the font-stretch descriptor. This descriptor widens and narrows a font family that has width-variant faces.
The values for widening and narrowing fonts are the following:
Here is the entire HTML markup:
The values for widening and narrowing fonts are the following:
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
The way you define a font-stretch is the following
p.uc {font-family: Verdana; font-stretch: ultra-condensed;}
This is how you would use it in your HTML markup
<p class="uc">Verdana Font ultra-condensed</p>
Here is the entire HTML markup:
<html>
<head>
<style>
p.uc {font-family: Verdana; font-stretch: ultra-condensed;}
p.ec {font-family: Verdana; font-stretch: extra-condensed;}
p.c {font-family: Verdana; font-stretch: condensed;}
p.sc {font-family: Verdana; font-stretch: semi-condensed;}
p.se {font-family: Verdana; font-stretch: semi-expanded;}
p.e {font-family: Verdana; font-stretch: expanded;}
p.ee {font-family: Verdana; font-stretch: extra-expanded;}
p.ue {font-family: Verdana; font-stretch: ultra-expanded;}
</style>
</head>
<body>
<p class="uc">Verdana Font ultra-condensed</p>
<p class="ec">Verdana Font extra-condensed</p>
<p class="c">Verdana Font condensed</p>
<p class="sc">Verdana Font semi-condensed</p>
<p class="se">Verdana Font semi-expanded</p>
<p class="e">Verdana Font expanded</p>
<p class="ee">Verdana Font extra-expanded</p>
<p class="ue">Verdana Font ultra-expanded</p>
</body>
</html>
Excellent Blog. Thank you so much for sharing.
ReplyDeletebest react js training in chennai
react js training in Chennai
react js workshop in Chennai
react js courses in Chennai