Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
Type de valeur
Valeur prédéfinie
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)

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.

Syntaxe de font-kerningSchéma syntaxique de la propriété CSS font-kerning auto auto normal normal none nonefont-kerning:;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.

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

(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.

AVATAR

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é.

font-kerning :
AVIATEUR
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.

1
font-kerning
Estimation de la prise en charge en pourcentage du parc actuel.
97%

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.

Propriétés.

Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
Détermine le comportement du navigateur face aux polices de caractères longues à charger.
Permet d'appliquer quelques effets au texte : relief, bordure...
Définit le nom de la police de caractères.
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
Définit le langage à prendre en compte lors du choix des caractères.
Optimise la forme des caractères en fonction de leur taille.
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
Ajuste la taille des caractères.
Définition du coefficient d'aspect de la police.
Modifie l'étirement ou la compression des caractères.
Sélectionne les styles italique ou oblique de la police de caractères.
Autorise ou non le calcul des styles manquants dans la police de caractères.
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
Définit la substitution de caractères (polices OTF, WOFF).
Applique une capitalisation des caractères.
Typographie spécifique aux caractères chinois ou japonais.
Choisit entre une présentation en emoji ou en texte.
Active ou désactive la ligature des caractères.
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
Mise en exposant ou en indice des caractères.
Donne accès aux possibilités stylistiques des polices OTF
Sélectionne une graisse pour les caractères.
Synonmye de font-stretch (largeur/élargissement des caractères).

Directives.

Définit tous les paramètres d'une police de caractères téléchargeable.
Définit les variantes typographiques à utiliser.
Définit une palette de couleurs appliable ensuite à une police de caractères.