Comment fonctionnent ces icônes: 🌍🌎🌏✅️?

123

Je peux voir ces caractères sous forme d'icônes colorées:

🌍🌎🌏✅️

Cela ne fonctionne que dans Firefox pour moi. Si vous ne pouvez pas voir les caractères en couleur, cela ressemble à ceci sur mon système (cela dépend probablement de la police de caractères):

description de l'image

Je peux même les voir dans les titres de firebug et d'onglets:

description de l'image

Et il y a un dossier complet . J'ai aussi fait cette animation document.title avec eux, ce qui montre qu'ils fonctionnent même en dehors du HTML.

Qu'est-ce que c'est?

firefox unicode

— Tomáš Zato
source

Les commentaires ne sont pas pour une discussion prolongée; cette conversation a été déplacée pour discuter .

— Journeyman Geek

J'utilise Opera et je ne les vois certainement pas comme vous l'avez montré dans l'image "ça ressemble à ça". Donc, je suis tenté de modifier cela de votre question mais cela ne serait pas très substantiel ...

— Stephan Bijzitter

37

@StephanBijzitter: Le fait que vous et les autres ne voyiez pas les icônes de cette façon est la raison pour laquelle l'image est importante. Ne l'enlève pas.

— user2357112

3

youtube.com/watch?v=tITwM5GDIAI

— J. Hougaard

2

Mot-clé: OpenType-SVG ( stateofwebtype.com/#OpenType-SVG , color.typekit.com )

— Prinzhorn

145

Ces caractères sont des émoticônes reconnus par les normes Unicode qui définissent ce que chaque caractère présente.

Leur aspect exact est différent pour chaque système d'exploitation et chaque application, mais ils représentent tous la même chose.

Le globe () est un caractère Unicode 1F30Fet s'appelle EARTH GLOBE ASIA-AUSTRALIA . le second () s'appelle WHITE HEAVY CHECK MARK et correspond à Unicode 2705.

De cette manière, il y a des milliers d'émoticônes, certaines que chaque application prend en charge et d'autres avec moins d'assistance. Voir la liste complète ici http://www.fileformat.info/info/emoji/browsertest.htm

— Yisroel Tech
source

56

Leur apparence exacte dépend de la police que vous utilisez, car elles définissent l'apparence d'un caractère et les émojis ne sont que des caractères.

— totymedli

23

En fait, le second est (comme vous l'avez dit) WHITE HEAVY CHECK MARK combiné avec VARIATION SELECTOR-16 . ✅️ copié de la question ressemble à une coche blanche dans une case verte, ✅ copié de votre réponse ressemble à une coche blanche avec une bordure noire, et lorsque je colle le sélecteur de variante après votre coche blanche avec une bordure noire, je reçois le idem coche blanche dans une case verte. Capture d'écran de ce commentaire pour la clarté

— Stijn

4

Ils ne l’auraient peut-être pas remarqué à cause d’un mauvais support des polices. Sur mon navigateur, le fond vert n'apparaît pas.

— user2357112

8

@Stijn, pour moi dans Chrome, les deux sont la coche en vert i.imgur.com/Cv5RTFM.png

— Yisroel Tech

6

Cela ne répond pas à la question, qui concerne la façon dont il est rendu dans Firefox, pas pourquoi les emoji sont là.

— oldmud0

73

Firefox utilise une police spéciale pour ces caractères emoji . Il utilise une fonctionnalité relativement nouvelle et rarement utilisée des polices TrueType: les glyphes de couleurs superposés. Autres que cela (c'est-à-dire ayant une police spéciale avec des glyphes pré-colorés), ces icônes sont des caractères Unicode ordinaires.

Windows ne prend en charge ces polices colorées que de manière native , à partir de la version 8.1. Firefox installe donc EmojiOne en privé et utilise son propre moteur de rendu des polices dans Windows 7. Cela explique également l'absence d'icônes emoji colorées dans la plupart des autres applications.

— taper
source

2

S'il existe une prise en charge native des glyphes de couleurs en couches dans Win10, pourquoi apparaissent-ils toujours en monochrome dans Edge, par exemple?

— Bas

5

@Bas, comme nous pouvons le constater via les outils de développement Edge, Segoe UI Emoji n'est pas sélectionné pour afficher cette page (les autres polices monochromes le font). L'insertion de la police dans l'attribut font-family fait l'affaire: i.imgur.com/IXiNC86.png

— aitap

4

@Bas Le support emoji coloré est dans les derniers aperçus Edge et sera dans la prochaine version publique.

— Josiah Keller

1

Curieusement, Firefox sur mon boîtier Ubuntu 16.10 affiche des glyphes en noir et blanc (j'ai démarré dans Win10 par la suite et j'ai confirmé qu'ils étaient bien colorés)

— Luke le

2

@Luke Ubuntu a prévu la prise en charge des glyphes de couleur pour Unity 8.

— stommestack

25

En bref : Firefox utilise une police dans laquelle ces symboles ont la même apparence.

Ces caractères font partie de la norme Unicode.

Unicode est une norme de l'industrie informatique pour le codage, la représentation et le traitement cohérents d'un texte exprimé dans la plupart des systèmes d'écriture du monde. Développée conjointement avec la norme UCS (Universal Coded Character Set) et publiée sous le nom de norme Unicode, la dernière version d'Unicode contient un répertoire de plus de 128 000 caractères couvrant 135 scripts modernes et historiques, ainsi que plusieurs jeux de symboles. -Wikipédia

Ainsi, contrairement à ASCII (qui en avait très peu), Unicode contient plusieurs jeux de symboles. Bien qu’il ait été normalisé sur le code devant représenter quel alphabet ou quel symbole, Unicode ne spécifie pas exactement à quoi le symbole doit ressembler. Ainsi, tous les systèmes d'exploitation ont leurs propres ensembles de symboles graphiques pour donner un aspect différent. Cela peut inclure certaines couleurs, d'autres des contours ou du noir et blanc.

En outre, il est également possible que les polices possèdent leur propre jeu d’illustrations pour ces symboles, de sorte que les caractères puissent correspondre à la convivialité de l’application. Même à l'intérieur de l'application, vous pouvez avoir différentes pages utilisant différents ensembles d'images. Ainsi, vous pouvez interagir avec le personnage comme vous le feriez autrement, mais le résultat serait différent.

Vous pouvez voir à quoi ressemblent exactement les emoji (pour 🌍🌎🌏, passez à # 1483) sur différentes plates-formes ici .

— PulseJet
source

4

128 000, c'est beaucoup d'icônes à dessiner. Je ne blâme pas les artistes d’avoir opté pour des icônes en noir et blanc plutôt qu’en couleur.

— Dan

@Dan, 128 000 est le nombre de caractères, pas de symboles. Cela inclut également les caractères linguistiques, qui sont énormes pour des langues telles que le japonais ou le mandarin.

— PulseJet

1

@Dan, je voulais seulement dire qu'il n'y a pas 128 000 symboles qu'il faudrait colorer. Ne dis pas qu'il n'y en a pas beaucoup à colorier, mais ce n'est nulle part près de 128 000.

— PulseJet

1

Ah, je ne voulais pas dire qu'ils devraient tous être colorés, mais simplement que dessiner que beaucoup de choses suffisent pour que je ne veuille pas en compliquer (c.-à-d. La couleur). Haha.

— Dan

2

@Dan personne ne dessine autant de points de code et presque aucune police ne contient de caractères pour tous les points de code Unicode. Le rendu de police remplacera les glyphes d'une autre police lorsque la police actuelle ne contient pas ces glyphes. Pourquoi n'y a-t-il pas une police contenant tous les glyphes Unicode?

— phuclv

2

Ces caractères « travail » de la même manière que d' autres personnages, tels que a, ø, λ, ଶୁ, にet 晨, le travail. Les caractères sont représentés par un nombre abstrait, qui est utilisé pour sélectionner et indexer une police disponible pour afficher le caractère.

Sur votre système, il semble que Firefox fait son propre rendu, et a accès à des polices contenant Glyphes pour 🌍, 🌎, 🌏et ✅️. Les autres applications utiliseront normalement les polices mises à disposition par le serveur X (ou l’équivalent). Limitez-vous donc aux polices que vous avez installées ou dirigées vers votre serveur (par exemple, avec xset +fpou similaire).

Les polices multicolores sont un développement récent et encore assez expérimental; Traditionnellement, les glyphes de police sont une couleur unique qui peut être composée sur n’importe quel fond.

— Toby Speight
source

1

C'est différent sur chaque navigateur, mais vous pouvez ajouter une police spécifique à votre site Web, qui se charge dans ces émojis . Par exemple:

Ce poste sur le design graphique Y at - il des polices Emoji gratuit? pourrait aussi être intéressant. Sans cette police d'icône personnalisée, vous devez garder à l'esprit que votre site Web sera différent dans chaque navigateur.

_{Ceci est juste une liste destinée à guider les gens vers les émoticônes et les smileys unicodes plus rapidement.}

— RaisingAgent
source

0

Ce ne sont que des caractères Unicode, de sorte que toutes les zones de texte prenant en charge Unicode peuvent les afficher sans problème, à condition que la police et les glyphes soient disponibles sur le système. Cependant, l' apparence de chaque caractère Unicode dépend du rendu et de la police utilisés.

Traditionnellement, les caractères ne sont remplis qu’avec une seule couleur. Les emojis colorés sont une nouveauté. Leur support varie donc d’une plateforme à l’autre. Diverses techniques ont été inventées pour la coloration, telles que des PNG, SVG ou des masques en couches intégrés . Mais tous nécessitent un nouveau rendu qui n'était pas disponible dans les anciens systèmes d'exploitation.

En conséquence, depuis la version 50.0, Firefox a intégré son propre moteur de rendu et sa propre police pour la prise en charge des emoji colorés. Vous pouvez le trouver dans les notes de publication

Modifié

Ajout d'un ensemble Emoji intégré pour les systèmes d'exploitation sans polices Emoji natives (Windows 8.0 et versions antérieures et Linux)

Le fichier de police peut être trouvé dans %FirefoxInstallDir%\fonts\EmojiOneMozilla.ttf

— phuclv
source