CSS font-kerning Property
The CSS font-kerning property controls the use of kerning, which adjusts the space between characters for better readability. It can take values like auto, normal, and none to enable, use default kerning, or disable kerning, respectively.
Syntax:
font-kerning: auto|normal|none;
Example: In this CSS example demonstrating font-kerning properties with different settings (‘auto’, ‘normal’, ‘none’) applied to paragraphs using Arial font, illustrating kerning effects in typography.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Font Kerning Example</title>
<style>
.kerning-auto {
font-family: 'Arial, sans-serif';
font-kerning: auto;
}
.kerning-normal {
font-family: 'Arial, sans-serif';
font-kerning: normal;
}
.kerning-none {
font-family: 'Arial, sans-serif';
font-kerning: none;
}
</style>
</head>
<body>
<p class="kerning-auto">Kerning is set to auto.</p>
<p class="kerning-normal">Kerning is set to normal.</p>
<p class="kerning-none">Kerning is set to none.</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