Font-kerning - Propriété CSS

font-kerning

Résumé des caractéristiques de la propriété font-kerning

Description rapide
Ajustement du crénage entre caractères.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto | normal | none
Pourcentages
Les pourcentages ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété font-kerning passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Polices de caractères
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)

Statut du document: REC (recommandation)

Schéma de la syntaxe de font-kerning.

Font-kerning property - Syntax diagramSyntax diagram of the font-kerning CSS property. See stylescss.free.fr for details. auto auto normal normal none nonefont-kerning:;font-kerning:;
Schéma syntaxique de la propriété font-kerning
Les liens du schéma donnent accès à plus de détails

Description de la propriété font-kerning.

font-kerning définit si le crénage des caractères doit être utilisé. Le crénage consiste à rapprocher plus ou moins les lettres en fonction de leur forme. Par exemple les lettres A et V majuscules ont une forme qui permet de les approcher.

Le rendu est plus harmonieux lorsque le crénage est appliqué, surtout lorsque la taille des caractères est importante.

Les polices de caractères du type OTF ou WOFF comportent les informations nécessaires au crénage. Ce n'est pas le cas de tous les formats. Sur les polices ne comportant pas ces informations de crénage, font-kerning n'aura aucun effet.

Valeurs pour font-kerning.

  • font-kerning: auto;

    Valeur par défaut. Le navigateur choisit d'appliquer ou non le crénage, en fonction de critères tels que la taille des caractères.

  • font-kerning: normal;

    Le crénage est appliqué. On donne la préférence à une restitution de qualité, au détriment d'une légère dégradation de la rapidité. Mais le traitement du kerning est léger et pénalise peu les performances.

  • font-kerning: none;

    Le crénage n'est pas appliqué. Cette valeur vise à améliorer la rapidité de traitement.

  • font-kerning: initial; (auto) font-kerning: inherit; font-kerning: revert; font-kerning: revertLayer; font-kerning: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de font-kerning.

La propriété font-kerning peut être animée, mais pour un rendu visuel insignifiant.

J'AVOUE J'EN AI BAVÉ, PAS VOUS ? (2)

(2) Serge Gainsbourg - La Javanaise

Accéder à la propriété font-kerning par programme.

Modifier la valeur de font-kerning en Javascript.

En Javascript, voici deux exemples de code pour modifier la valeur de font-kerning. Le premier utilise la notation typique de CSS : un tiret pour séparer les mots (notation kebab-case). Et le deuxième utilise une majuscule pour séparer les mots (notation en camel-case).

Javascript
let el = document.getElementById('id'); el.style['font-kerning'] = 'none'; // ou let el = document.getElementById('id'); el.style.fontKerning = 'none';

Lire en Javascript la valeur de font-kerning.

Voici un premier exemple de code pour relire la valeur de la propriété font-kerning. Il fonctionne seulement si la propriété a été initialisée dans l'attribut style de l'élément (donc dans le code HTML). Les valeurs affectées via un sélecteur CSS ne sont reconnues par ce code.

Javascript
let el = document.getElementById('id'); let value = el.style['font-kerning']; // ou let el = document.getElementById('id'); let value = el.style.fontKerning;

Lire la valeur calculée de font-kerning en Javascript.

La valeur calculée est celle qui résulte de la cascade des héritages : valeur directe, valeur héritée, ou à défaut la valeur initiale de la propriété, qui, dans le cas de font-kerning est auto.

Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('font-kerning');

Modifier la valeur de la propriété font-kerning avec JQuery.

Comme Javascript, JQuery accepte aussi bien l'écriture en kebab-case que l'écriture en camel-case pour le nom de la propriété.

JQuery
let value = $('#id').css('font-kerning');

Lire la valeur calculée de la propriété font-kerning avec JQuery.

JQuery
let value = $('#id').css('font-kerning');

Testez vous-même.

Quelque soit le bouton utilisé, le résultat sera le même avec font-kerning car cette propriété n'accepte que des valeur prédéfinies.

Exemple interactif avec la propriété font-kerning.

Le mot "aviateur" en majuscules, alternant des A, des V et des T est particulièrement adapté à l'étude du crénage. Observez que, sans le crénage, la première lettre semble détachée de la suite du mot. De même, entre le A et le T, le mot semble coupé.

font-kerning :
AVIATEUR
AVIATEUR

Compatibilité des navigateurs avec font-kerning.

Le tableau ci-dessous illustre aussi bien la prise en compte de la propriété font-kerning que la possibilité de crénage des caractères, dans la mesure où la police utilisée comporte les informations de crénage.

Colonne 1
Support de la propriété font-kerning utilisée pour gérer l'approche des caractères.
1
Propriété
font-kerning
Estimation de la prise en charge globale.
19%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Histoire de la propriété font-kerning.

Voir aussi, à propos des polices de caractères.

Les propriétés, ou autres définitions, concernant les polices de caractères sont nombreuses. Elles sont regroupées dans le module CSS Fonts Module. Vous trouvez les définitions suivantes dans ce module :

Propriétés :

font
Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
font-effect
Permet d'appliquer quelques effets au texte : relief, bordure...
font-family
Sélectionne une police de caractères parmi celles qui sont disponibles ou celles qui sont téléchargées.
font-feature-settings
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
font-language-override
Définit le langage à prendre en compte lors du choix des caractères.
font-optical-sizing
Optimise la forme des caractères en fonction de leur taille.
font-palette
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
font-size
Ajuste la taille des caractères, ce qui impacte aussi les units comme em, ex, etc.
font-size-adjust
Définition du coefficient d'aspect de la police.
font-smooth
Définit si un algorithme de lissage doit être utilisé et lequel.
font-stretch
Modifie l'étirement ou la compression des caractères.
font-style
Sélectionne les styles italique ou oblique de la police de caractères.
font-synthesis
Autorise ou non le calcul des styles manquants dans la police de caractères.
font-synthesis-position
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
font-synthesis-small-caps
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
font-synthesis-style
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
font-synthesis-weight
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
font-variant
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
font-variant-alternates
Définit la substitution de caractères (polices OTF, WOFF).
font-variant-caps
Applique une capitalisation des caractères.
font-variant-east-asian
Typographie spécifique aux caractères chinois ou japonais.
font-variant-emoji
Choisit entre une présentation en emoji ou en texte.
font-variant-ligatures
Active ou désactive la ligature des caractères.
font-variant-numeric
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
font-variant-position
Mise en exposant ou en indice des caractères.
font-variation-settings
Donne accès aux possibilités stylistiques des polices OTF.
font-weight
Sélectionne une graisse pour les caractères.
font-width
Synonyme de font-stretch (largeur/élargissement des caractères).

Fonctions :

palette-mix()
Établit le mélange de deux palettes de couleurs issus de deux polices de caractères différentes.

Directives :

@font-face
Définit tous les paramètres d'une police de caractères téléchargeable.
@font-feature-values
Définit les variantes typographiques à utiliser.
@font-palette-values
Définit une palette de couleurs applicable ensuite à une police de caractères.

Descripteurs :

ascent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessus de la ligne de base.
descent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessous de la ligne de base.
font-display
Descripteur pour @font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.
line-gap-override
Descripteur pour @font-face. Définit l'interligne de la police.
src
Définit la source d'un fichier de police de caractères à télécharger, ou d'une image à afficher.
unicode-range
Descripteur pour @font-face. Définit la plage des codes de caractères à télécharger dans une police.