Font-variant-emoji - Propriété CSS

Schéma syntaxique de font-variant-emoji.

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

De nombreux caractères Unicode ont une présentation soit sous forme de caractère, soit sous forme d'un pictogramme. Les caractères sont monochromes, tandis que les pictogrammes peuvent comporter plusieurs couleurs.

Il n'y a pas de règle pour déterminer si un caractère comporte les deux variantes, de même qu'il n'y a pas de règle pour déterminer laquelle des deux variantes doit être utilisée par défaut. C'est particulièrement ennuyeux dans le cas de caractères souvent utilisés ensembles, et qui pourtant ne sont pas présentés de la même façon par défaut, ou dont certains seulement comportent plusieurs variantes.

La propriété font-variant-emoji permet d'imposer soit la présentation sous forme de caractère, soit la présentation sous forme de pictogramme. Dans le cas évoqué ci-dessus, elle permet d'homogénéiser le rendu :

font-variant-emoji ne concerne que les caractères comportant une variante caractère et une variante pictogramme, elle n'a aucun effet sur les autres caractères.

Techniquement, le choix de l'une ou l'autre des variantes se fait en ajoutant un sélecteur de variante (VS pour Variation Selector) à la suite du caractère.

• VS15 (FE0E) pour forcer l'affichage du caractère sous sa forme de caractère.
• VS16 (FE0F) pour forcer l'affichage du caractère sous la forme d'un pictogramme.

Valeurs pour font-variant-emoji.

• font-variant-emoji: normal;

  Les caractères sont affichés suivant leur variante par défaut, mais aucune règle n'est définie pour déterminer laquelle des variantes doit être utilisée par défaut. Cette dernière peut donc être différente suivant les navigateurs, ou suivant les systèmes. Et tous les caractères ne sont pas affichés par défaut dans la même variante.

  ☂ ☎ ☀ ♥

• font-variant-emoji: text;

  Les caractères comportant une variante caractère et une variante pictogramme sont affichée suivant leur variante caractère, exactement comme si le sélecteur de variante VS15 était ajouté à la suite de chacun des caractères.

  ☂ ☎ ☀ ♥

• font-variant-emoji: emoji;

  Les caractères comportant une variante caractère et une variante pictogramme sont affichée suivant leur variante pictogramme, comme si le sélecteur VS16 était ajouté à la suite de chacun des caractères.

  ☂ ☎ ☀ ♥

• font-variant-emoji: unicode;

  Les caractères sont restitués conformément à la spécification Unicode UTS51. Cependant, si un sélecteur de variante VS15 ou VS16 est présent, il sera prioritaire.

  ☂ ☎ ☀ ♥

Valeurs globales
(communes à toutes les propriétés)

Exemple interactif avec la propriété font-variant-emoji.

Liste des caractères concernés.

Comme nous l'avons déjà évoqué dans la description de la propriété, seuls les caractères comportant à la fois une variante caractère et une variante pictogramme sont impactés par font-variant-emoji. Voici la liste de ces caractères, avec leurs deux variantes.

Prise en charge par les navigateurs (compatibilité).

Comme on peut le voir sur le tableau ci-dessous, la prise en charge de font-variant-emoji est encore très imparfaite (2024).

Certains navigateurs comme Firefox ou Safari reconnaissent cette propriété, mais son traitement est désactivé par défaut. Il peut être activé en modifiant les options
layout.css.font-variant-emoji.enabled sur Firefox, (accéder aux flags sur Firefox)
CSS font-variant-emoji property sur Safari (accéder aux flags sur Safari).

Remarques :

(1) Dasactivé par défaut. Peut être activé avec le flag font-variant-emoji.

(2) Désactivé par défaut. Peut être activé avec le flag layout.css.font-variant-emoji. enabled.

1

Propriété
font-variant-emoji

Estimation de la prise en charge globale.

67%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

1

Safari sur IOS

1

Opéra

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Firefox

2

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété font-variant-emoji.

• Module CSS - Polices de caractères - Niveau 4

  Première présentation de la propriété font-variant-emoji.
  

  11 Juillet 2017

  Document de travail.

  

  

  

Voir aussi, concernant les polices de caractères.

Les propriétés 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 :

Fonctions :

Directives :

Descripteurs :