font-kerning
A propriedade CSS font-kerning
controla o o uso da informação de kerning, que é, o controle de como as letras serão espaçadas. A informação de kerning é armazenada na fonte, e se a fonte é well-kerned, essa caracteristica permite que o espaçamento entre caracteres seja muito parecido, independente dos caracteres.
css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
/* Global values */
font-kerning: inherit;
font-kerning: initial;
font-kerning: unset;
Initial value | auto |
---|---|
Aplica-se a | all elements and text. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Syntax
Values
auto
-
This keyword defers to the browser regarding whether to use kerning. When the font size is small, font kerning may look strange and browsers will disable it. This is the default value.
normal
-
This keyword requires kerning to be applied.
none
-
This keyword prevents the browser from using the kerning information stored in the font.
Formal syntax
Examples
css
p {
font-kerning: none;
}
Specifications
Specification |
---|
CSS Fonts Module Level 4 # font-kerning-prop |
Browser Compatibility
BCD tables only load in the browser
Kerning Demo
HTML Content
html
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>
CSS Content
css
#nokern,
#kern {
font-size: 2rem;
font-family: serif;
}
#nokern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
JS Content
js
var input = document.getElementById("input"),
kern = document.getElementById("kern"),
nokern = document.getElementById("nokern");
input.addEventListener("keyup", function () {
kern.textContent = input.value; /* Update content */
nokern.textContent = input.value;
});
kern.textContent = input.value; /* Initialize content */
nokern.textContent = input.value;