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-variant-ligatures - Propriété CSS

font-variant-ligatures

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

Description rapide
Active ou désactive la ligature des caractères.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
normal | none | common-ligatures | no-common-ligatures | historical-ligatures | no-historical-ligatures | discretionary-ligatures | no-discretionary-ligatures | contextual | no-contextual
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété font-variant-ligatures 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)

Description de la propriété font-variant-ligatures.

font-variant-ligatures permet d'activer ou désactiver la ligature des caractères, c'est à dire le fait que certaines lettres, lorsqu'elles se suivent peuvent être reliées entre elles, ou même former un nouvelle lettre. Voici les ligatures les plus courantes :

Exemples de ligatures

Les principaux caractères liés existent dans le jeu Unicode, mais ils ne sont pas disponibles directement au clavier : il faut connaître leur code (ou l'entité HTML pour les utiliser). Les polices OTF offre la possibilité de remplacer automatiquement certaines paires de lettres par le caractère lié correspondant. C'est évidemment beaucoup plus simple pour les auteurs, qui peuvent taper leur texte, sans entrer dans le codage informatique.

font-variant-ligatures est la propriété la plus simple à utiliser, mais vous pouvez aussi vous renseigner sur la propriété résumée font-variant qui permet d'activer ou désactiver plusieurs options des polices OTF en une seule écriture.
Quant à font-feature-settings, c'est une propriété beaucoup plus complexe à utiliser, mais qui permet une gestion bas niveau de toutes les possibilités des polices OTF.

Quelques précisions sur les ligatures.

Une ligature consiste donc à remplacer une paire de lettres par un autre caractère, plus esthétique ou plus lisible. Le jeu de caractères Unicode comporte de nombreuses lettres ligaturées comme œ, æ, , etc. mais pour que le remplacement puisse être automatique (ce que prétend faire font-variant-ligatures, il faut en plus que la police comporte une table de substitution, afin que le navigateurs sache par quoi remplacer les paires de lettres.

Bien entendu l'auteur de la page a toujours la possibilité d'utiliser les entités HTML afin d'imposer les caractères de son choix mais les navigateurs peuvent à présent prendre ce travail à leur charge.

Les ligatures sont des subtilités typographiques : on pourrait tout simplement les ignorer. Mais les tablettes de lecture, les livres numériques sont de plus en plus nombreux : Kindle de Amazon, Kobo, Pocket Book, etc. Il serait dommage que ces livres numériques fassent moins bien que leurs prédécesseurs, les livres papier.

Plusieurs types de ligatures :

Les ligatures orthographiques.

Ne pas utiliser ces ligatures est considéré comme une faute d'orthographe. Les correcteurs signalent d'ailleurs ces oublis. En français, ce sont essentiellement les deux caractères œ et æ, qui existent aussi en majuscules Œ et Æ. Les autres langues comportent aussi leurs ligatures orthographiques comme ß en allemand.

Les ligatures esthétiques.

Certaines lettres, lorsqu'elles se suivent, ont des formes qui se chevauchent ou qui rendent un résultat peu esthétique pour les puristes. C'est surtout le cas avec les polices à empattements comme 'Times new Roman'. Par exemple, le f suivi d'un i fait que le point du i vient percuter la boucle du f. On pourra avantageusement remplacer ces deux lettres par le caractère .

Une autre ligature est très couramment utilisée, celle qui consiste à remplacer les lettres e et t par &.

fi => fi     et => &

Les ligatures optionnelles.

Certains créateurs de polices de caractères ne se privent pas de dessiner non seulement toutes les lettres individuelles mais également des caractères de remplacement pour de nombreuses paires de caractères. L'auteur peut activer ces ligatures complémentaires mais le résultat sera fortement lié à la police utilisée.

ct => Ligature ct     st => Ligature st

Les ligatures historiques.

Elles sont un peu tombées dans l'oubli mais il peut être intéressant de les ressortir pour créer un effet de typographie à l'ancienne. Malheureusement, très peu de polices comportent ces caractères.

Pour en savoir plus sur les ligatures.

Si vous souhaitez approfondir cette notion de ligature, nous vous recommandons cette page, très précise et détaillée : Les ligatures dans les navigateurs.

Syntaxes pour font-variant-ligatures.

Syntaxe de font-variant-ligaturesSchéma syntaxique de la propriété CSS font-variant-ligatures normal normal none none common-ligatures common-ligatures no-common-ligatures no-common-ligatures discretionary-ligatures discretionary-ligatures no-discretionary-ligatures no-discretionary-ligatures historical-ligatures historical-ligatures no-historical-ligatures no-historical-ligatures contextual contextual no-contextual no-contextualfont-variant-ligatures:;font-variant-ligatures:;Télécharger l'image en SVG

La police de caractères utilisée pour les exemples et le simulateur est la police Kleymissky (copyright gluk).

  • font-variant-ligatures: normal;

    Valeur par défaut. Les caractères sont restitués tels qu'ils dont définis par défaut dans la police. Certaines ligatures sont utilisées, d'autres non. En général cette valeur est équivalente à common-ligatures et contextual.

    L fi ff
  • font-variant-ligatures: none;

    Aucune ligature n'est utilisée.

    L fi ff
  • font-variant-ligatures: common-ligatures; font-variant-ligatures: no-common-ligatures;

    Activation ou désactivation des ligatures les plus communes : par exemple fi => fi

    Correspond aux styles OTF liga et clig. Reportez-vous à la propriété font-feature-settings pour une description plus complète des possibilités des polices Open Type.

    L fi ff
    common-ligatures
    L fi ff
    no-common-ligatures
  • font-variant-ligatures: discretionary-ligatures; font-variant-ligatures: no-discretionary-ligatures;

    Activation ou désactivation des ligatures spécifiques à la police utilisée.

    Correspond au style OTF dlig.

    L fi ff
    discretionary-ligatures
    L fi ff
    no-discretionary-ligatures
  • font-variant-ligatures: historical-ligatures; font-variant-ligatures: no-historical-ligatures;

    Activation ou désactivation des ligatures telles qu'elles étaient utilisées en imprimerie mécanique, comme par exemple fz => β.

    Correspond au style OTF hlig.

    L fi ff
    historical-ligatures
    L fi ff
    no-historical-ligatures
  • font-variant-ligatures: contextual; font-variant-ligatures: no-contextual;

    Activation ou désactivation des ligatures contextuelles.

    Correspond au style OTF calt.

    L fi ff
    contextual
    L fi ff
    no-contextual
  • font-variant-ligatures: initial; font-variant-ligatures: inherit; font-variant-ligatures: revert; font-variant-ligatures: revert-layer; font-variant-ligatures: unset;

    La valeur initiale est : normal.

Animation de la propriété font-variant-ligatures.

Les trois animations ci-dessous font bien ressortir les différences de comportement de chacune des polices de caractères. Et donc en conséquence, la difficulté de gérer les ligatures autrement que de façon spécifique à la police utilisée.

  • Kleymissky ajoute bien une ligature entre le f et le i, mais ajoute également des boucles sur les premières et dernières lettres de chaque mot. Ce qui ne devrait pas être inclus dans les ligatures.
  • Warnock applique également les ligatures sur les paires de lettres st et ct. Ce que les autres polices ne font pas.
  • Quant à Comic Jens il s'agit d'une police de caractères humoristique avec des ligatures tout à fait spécifiques : on voit les trois lettres LOL en majuscules ou en minuscules, devenir un nouveau symbole.
Test tact
fin effet


Kleymissky
Test tact
fin effet

Warnock
Test tact
LOL lol


Comic Jens

Simulateur.

L'effet de la propriété font-variant-ligatures est très dépendant de la police utilisée. Observez surtout les paires de caractères fi et ff, qui sont le plus souvent traitées.


Police :

font-variant-ligatures :

La ligature est en effet une finition esthétique subtile
if   ij   IJ   fi   ff   tf   ft   jf   fj   sz   ct   st

Prise en charge par les navigateurs (compatibilité).

La propriété font-variant-ligatures est bien reconnue par les navigateurs actuels, mais il faut garder à l'esprit que son effet est très dépendant de la police utilisée.

1
font-variant-ligatures
Estimation de la prise en charge en pourcentage du parc actuel.
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que font-variant-ligatures.

Les spécifications CSS éditées par le W3C sont organisées en modules. font-variant-ligatures 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.
Ajustement du crénage entre caractères.
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.
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.