font-kerning
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La propriété CSS font-kerning définit l'utilisation des informations de crénage stockées dans une police.
Exemple interactif
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
Vous êtes 3 WAGONS en retard, il va falloir rattraper.
</div>
</section>
section {
font-family: serif;
}
Le crénage affecte la façon dont les lettres sont espacées. Dans les polices bien crénées, cette fonctionnalité rend l'espacement des caractères plus uniforme et agréable à lire en réduisant les espaces blancs entre certaines combinaisons de caractères.
Dans l'image ci-dessous, par exemple, les exemples à gauche n'utilisent pas le crénage, tandis que ceux à droite l'utilisent :
Syntaxe
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
/* Valeurs globales */
font-kerning: inherit;
font-kerning: initial;
font-kerning: revert;
font-kerning: revert-layer;
font-kerning: unset;
Valeurs
auto-
Ce mot-clé laisse au navigateur le choix d'utiliser ou non le crénage. Quand la taille de la police est petite, le crénage de la police peut avoir l'air étrange et les navigateurs le désactiveront.
normal-
Ce mot-clé force l'application du crénage.
none-
Ce mot-clé empêche le navigateur d'utiliser l'information de crénage stockée dans la police.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | all elements and text. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
font-kerning =
auto |
normal |
none
Exemples
Activer ou désactiver le crénage
HTML
<div id="kern"></div>
<div id="no-kern"></div>
<textarea id="input">AV T. ij</textarea>
CSS
div {
font-size: 2rem;
font-family: serif;
}
#no-kern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
JavaScript
const input = document.getElementById("input");
const kern = document.getElementById("kern");
const noKern = document.getElementById("no-kern");
input.addEventListener("keyup", () => {
kern.textContent = input.value; /* On met à jour le contenu */
noKern.textContent = input.value;
});
kern.textContent = input.value; /* On initialise le contenu */
noKern.textContent = input.value;
Spécifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-kerning-prop |