Propriété CSS font-kerning
La propriété CSS font-kerning contrôle les informations de crénage de la police. Découvrez les valeurs et essayez des exemples.
La propriété CSS font-kerning contrôle si le navigateur utilise les informations de crénage stockées dans une police.
Le crénage est l'ajustement de l'espacement entre des paires de caractères spécifiques afin que le texte paraisse uniformément équilibré. Sans crénage, chaque glyphe conserve sa marge latérale par défaut, ce qui peut laisser des espaces gênants après des lettres comme A, V, T ou W. Les concepteurs typographiques incluent dans la police une table de paires de crénage (par exemple AV, To, We) indiquant au moteur de rendu de rapprocher ces lettres. font-kerning détermine si cette table est appliquée.
Le crénage concerne uniquement l'espace entre les glyphes. Ne le confondez pas avec letter-spacing, qui ajoute un espacement fixe à chaque caractère, quelle que soit la paire.
Quand l'utiliser
Pour la plupart des pages, vous n'avez jamais besoin de toucher à font-kerning — les navigateurs modernes activent le crénage par défaut pour le corps du texte. Vous y avez recours dans deux situations :
- Forcer le crénage sur les petits textes. Certains navigateurs désactivent le crénage en dessous d'une certaine taille pour des raisons de performances. Définir
font-kerning: normalle fait s'appliquer à toutes les tailles — utile pour une typographie soignée comme les titres ou les citations en exergue. - Désactiver le crénage avec
font-kerning: none. Cela s'avère parfois nécessaire pour les mises en page à espacement fixe, les données tabulaires, ou lorsque vous mesurez vous-même la largeur du texte et souhaitez des avances prévisibles et sans crénage.
Si la police ne possède pas de table de crénage, la propriété n'a aucun effet visible.
| Valeur initiale | auto |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Hérité | Oui. |
| Animatable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.fontKerning = "none"; |
Syntaxe
Syntaxe de la propriété CSS font-kerning
font-kerning: auto | normal | none;Comparaison du crénage activé et désactivé
Les paires AV, WA et To illustrent le crénage de façon très nette. Dans l'exemple ci-dessous, le premier bloc force le crénage activé, le second le désactive, afin que vous puissiez voir les espaces s'agrandir :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
font-family: serif;
font-size: 60px;
}
div.kerned {
font-kerning: normal;
}
div.unkerned {
font-kerning: none;
}
</style>
</head>
<body>
<h2>font-kerning property example</h2>
<div class="kerned">AVATAR WAVE To</div>
<div class="unkerned">AVATAR WAVE To</div>
</body>
</html>La différence est la plus perceptible aux grandes tailles et dans les polices à empattements, qui disposent généralement de tables de crénage plus riches.
Valeurs
font-kerning accepte l'un des trois mots-clés suivants :
| Valeur | Description |
|---|---|
auto | Laisse le navigateur décider s'il faut appliquer le crénage. Il s'agit de la valeur par défaut. Les navigateurs l'activent généralement, mais peuvent le désactiver à très petites tailles. |
normal | Applique toujours les informations de crénage de la police. |
none | Désactive le crénage ; les glyphes conservent leur espacement par défaut. |
Propriétés associées
font-kerning fait partie des contrôles typographiques OpenType en CSS. Ces propriétés s'associent bien avec elle :
letter-spacing— ajoute ou supprime un espace uniforme entre toutes les lettres.font-feature-settings— accès de bas niveau aux fonctionnalités OpenType (kernest la fonctionnalité quefont-kerningexpose sous un nom plus convivial).font-familyetfont-variant— choisissent et affinent la police.
Comportement par défaut du navigateur
Étant donné que la valeur initiale est auto, laisser la propriété non définie convient à la plupart des textes — le crénage se produit quand même. Définissez-la explicitement uniquement lorsque vous devez garantir un comportement uniforme entre les navigateurs, par exemple font-kerning: normal sur les titres d'affichage.