CSS font-stretch Property
The CSS font-stretch property adjusts the width of selected fonts, allowing you to make text narrower or wider. It accepts values like normal, condensed, expanded, and specific percentages.
Syntax:
font-stretch: normal|ultra-condensed|extra-condensed|condensed|
semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;
Example: In this example showcasing font-stretch property with ‘normal’, ‘condensed’, and ‘expanded’ values applied to paragraphs using Arial font, demonstrating text width adjustments for different typographical effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Font Stretch Example</title>
<style>
.normal {
font-family: 'Arial, sans-serif';
font-stretch: normal;
}
.condensed {
font-family: 'Arial, sans-serif';
font-stretch: condensed;
}
.expanded {
font-family: 'Arial, sans-serif';
font-stretch: expanded;
}
</style>
</head>
<body>
<p class="normal">This is normal font stretch.</p>
<p class="condensed">This is condensed font stretch.</p>
<p class="expanded">This is expanded font stretch.</p>
</body>
</html>
Output:
CSS Fonts
CSS fonts are used to style the text within HTML elements. The font-family property specifies the typeface, while font-size, font-weight, and font-style control the size, thickness, and style of the text. Combining these properties enhances the typography and readability of web content.
Example: In this example, we will use a few CSS Font properties.
<!DOCTYPE html>
<html>
<head>
<title>CSS Font</title>
<style>
.gfg {
font-family: "Arial, Helvetica, sans-serif";
font-size: 60px;
color: #090;
text-align: center;
}
.geeks {
font-family: "Comic Sans MS", cursive, sans-serif;
font-variant:small-caps;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div class="geeks">
A computer science portal for geeks
</div>
</body>
</html>
Output:
There are many font properties in CSS which are mentioned and briefly discussed below:
Below few examples are given from CSS Font Collection :
Table of Content
- CSS font-family Property
- CSS font-style Property
- CSS font-weight Property
- CSS font-variant Property
- CSS font-size Property
- CSS font-stretch Property
- CSS font-kerning Property
Contact Us