font-kerning - Propriété CSS
Résumé des caractéristiques de la propriété font-kerning
auto
| normal
| none
auto
font-kerning
passe d'une valeur à l'autre sans transition.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.
Syntaxes 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 (1).
- font-kerning:
initial
; font-kerning:inherit
; font-kerning:revert
; font-kerning:revert-layer
; font-kerning:unset
;La valeur initiale est :
.auto
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
Manipulation de la propriété font-kerning
par programme.
Le mot "AVATAR" a été choisi parce que presque toutes ses lettres (à part le R) ont des formes qui permet de les rapprocher les unes des autres.
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
).
function setFontKerning(el) {
el.style['font-kerning']='none';
// ou
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.
function getFontKerning(el) {
alert(el.style['font-kerning']);
// ou
alert(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
.
function getCalcFontKerning(el) {
alert(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é.
function setFontKerning(el) {
$(el).css('font-kerning','normal');
// ou
$(el).css('fontKerning','normal');
}
Lire la valeur calculée de la propriété font-kerning
avec JQuery.
function getCalcFontKerning(el) {
alert($(el).css('font-kerning'));
// ou
alert($(el).css('fontKerning'));
}
Simulateur.
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é.
AVIATEUR
Prise en charge par les navigateurs (compatibilité).
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
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que font-kerning
.
Les spécifications CSS éditées par le W3C sont organisées en modules. font-kerning
fait partie du Module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.