Font-kerning - Propriété CSS
Résumé des caractéristiques de la propriété font-kerning
auto | normal | noneautofont-kerning passe d'une valeur à l'autre sans transition.Single : valeur unique (l'ordre n'intervient pas).Schéma de la syntaxe de font-kerning.
font-kerning.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.
Description de la propriété font-kerning.
La propriété 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.
TAVERNEfont-kerning:auto; - 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 crénage est léger et pénalise peu les performances.
TAVERNEfont-kerning:normal; - font-kerning: none;
Le crénage n'est pas appliqué. Cette valeur vise à améliorer la rapidité de traitement.
TAVERNEfont-kerning:none; - 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.
(2) Serge Gainsbourg - La Javanaise
Accéder à la propriété font-kerning par programme.
Modifier l'autorisation du crénage 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).
let el = document.getElementById('id');
el.style['font-kerning'] = 'none';
// ou
let el = document.getElementById('id');
el.style.fontKerning = 'none';
Lire en Javascript l'autorisation du crénage.
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.
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.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('font-kerning');
Modifier l'autorisation du crénage 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é.
let value = $('#id').css('font-kerning');
Lire la valeur calculée de la propriété font-kerning avec 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 valeurs 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é.
Les échantillons sont donnés dans deux polices différentes.
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.
font-kerning utilisée pour gérer l'approche des caractères.font-kerningNavigateurs 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.
-
Module CSS - Polices de caractères - Niveau 3
Cette spécification concerne les polices de caractères. Une police de caractères contient la représentation visuelle des caractères. Dans sa forme la plus simple il s'agit juste d'associer les codes des caractères aux formes de ceux-ci.
Au sein d'une famille de caractère, les formes sont définies, mais peuvent varier en épaisseur du trait, inclinaison, largeur, etc. Les propriétés CSSfont-...permettent de choisir l'aspect final des caractères.
Les polices de caractères peuvent être localisées sur le poste de l'internaute ou téléchargées.Concernantfont-kerning. Première apparition de la propriétéfont-kerning.
21 Juillet 1997Document de travail.
03 Octobre 2013Candidat à la recommandation.
14 Août 2018Proposé à la recommandation.
20 Septembre 2018Recommandation. -
Module CSS - Polices de caractères - Niveau 4
Ce niveau 4 de la spécification sur les polices de caractères reprend ce qui est défini dans le niveau 3. Il ajoute la possibilité de définir ce qui se passe quand une police est longue à charger ou absente. Il ajoute également le support des polices colorées et précise de nombreux points encore mal définis dans le niveau 3.
Concernantfont-kerning. Pas de changements concernant la propriétéfont-kerning.11 Juillet 2017Document de travail.
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 Module CSS - Polices de caractères. Vous trouvez les définitions suivantes dans ce module :
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.