CSS font-variant Property
It is used to create the small-caps effect. It can be “normal or small-caps”.
Syntax:
font-variant: font variant value;
Example: In this example with CSS: ‘gfg’ class applies ‘small-caps’ variant, bold ‘Times New Roman’ font, 40px size, green color, centered; ‘geeks’ class uses ‘normal’ variant, centered text.
<!DOCTYPE html>
<html>
<head>
<title>font-variant property</title>
<style>
.gfg {
font-variant: small-caps;
font-weight: bold;
font-family: "Times New Roman";
font-size: 40px;
color: #090;
text-align: center;
}
.geeks {
font-variant: normal;
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">w3wiki</div>
<div class="geeks">
A computer science portal for geeks
</div>
</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