CSS font-kerning Property
The font-kerning property in CSS asserts the use of the kerning information that is stored in a font. Kerning process defines how the letters are spaced.
In well-kerned fonts, this property makes the character spacing more uniform and pleasant to read than it would be. This property is specified as one of the keyword values like- auto, normal, and none.
Syntax for font-kerning property
Following is the syntax for the font-kerning property.
font-kerning: auto|normal|none;
Example: CSS font-kerning property
Here in the example below, we are using the font-kerning property with different border styles, colors, and different values. In this case, we have given the font-kerning property value as none or normal.
<!DOCTYPE html>
<html>
<head>
<title>The font-kerning property in CSS</title>
<style type="text/css">
div {
font-size: 2rem;
font-family: serif;
}
#nokern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
</style>
</head>
<body>
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
</body>
</html>
Output:
Example 2: CSS font-kerning property
Here in the example below, we are using the font-kerning property with different border styles, colors, and different values. In this case, we have given the font-kerning property value as auto. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>The font-kerning property in CSS</title>
<style type="text/css">
div {
font-size: 2rem;
font-family: serif;
color: deeppink;
}
#nokern {
font-kerning: auto;
}
#kern {
font-kerning: auto;
}
</style>
</head>
<body>
<div id="kern">AV T. ij</div>
<div id="nokern">AV T. ij</div>
<textarea id="input">AV T. ij</textarea>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
|
Name of Browser
|
Background size
|
contain and cover
|
|
Chrome
|
33
|
33
|
|
Edge
|
79
|
79
|
|
Firefox
|
32
|
32
|
|
Internet Explorer
|
no
|
no
|
|
Opera
|
20
|
20
|
|
Safari
|
9
|
9
|
|
Webview Android
|
4.43
|
4.43
|
|
Chrome Android
|
33
|
33
|
|
Firefox Android
|
32
|
32
|
|
Opera Android
|
20
|
20
|
|
IOS Safari
|
9
|
9
|
|
Samsung Internet
|
2.0
|
2.0
|
Conclusion
The initial value for the font-kerning property in CSS is auto. This property is applicable to all elements and also to the ::first-letter and ::first-line. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
