¿Cómo funcionan estos íconos: 🌍🌎🌏✅️?

123

Puedo ver estos personajes como iconos de colores:

🌍🌎🌏✅️

Solo funciona en Firefox para mí. Si no puede ver los caracteres en color, se ve así en mi sistema (probablemente depende de la fuente):

descripción de la imagen

Incluso puedo verlos en los títulos de Firebug y Tab:

descripción de la imagen

Y hay un archivo completo de ellos. También hice esta animación document.title con ellos, lo que demuestra que funcionan incluso fuera de HTML.

¿Que es eso?

firefox unicode

— Tomáš Zato
fuente

Los comentarios no son para discusión extendida; Esta conversación se ha movido al chat .

— Journeyman Geek

Estoy usando Opera y definitivamente no los veo de la forma en que lo han mostrado en la imagen "se ve así". Por lo tanto, estoy tentado a editar esa idea de la pregunta, pero no estaría muy importante ...

— Stephan Bijzitter

37

@StephanBijzitter: El hecho de que usted y otros no vean los iconos de esa manera es la razón por la cual la imagen es importante. No lo quites.

— user2357112

3

youtube.com/watch?v=tITwM5GDIAI

— J. Hougaard

2

Palabra clave: OpenType-SVG ( stateofwebtype.com/#OpenType-SVG , color.typekit.com )

— Prinzhorn

145

Estos personajes son emojis reconocidos por los estándares Unicode que definen lo que presenta cada personaje.

El aspecto exacto para ellos es diferente para cada sistema operativo y cada aplicación, pero todos representan lo mismo.

El globo (🌏) es un carácter Unicode 1F30Fy se llama GLOBO DE LA TIERRA ASIA-AUSTRALIA . el segundo (✅) se llama WHITE HEAVY CHECK MARK y es Unicode 2705.

De esa manera, hay miles de emojis, algunos que admiten todas las aplicaciones y otros con menos soporte. Vea la lista completa aquí http://www.fileformat.info/info/emoji/browsertest.htm

— Yisroel Tech
fuente

56

El aspecto exacto de ellos depende de la fuente que use, porque las fuentes son las cosas que definen cómo debe verse un personaje y los emojis son solo caracteres.

— totymedli 01 de

23

En realidad, el segundo es (como usted dijo) MARCA DE VERIFICACIÓN PESADA BLANCA combinada con VARIATION SELECTOR-16 . ✅️ copiado de la pregunta parece una marca de verificación blanca en un cuadro verde, ✅ copiado de su respuesta parece una marca de verificación blanca con un borde negro, y cuando pego el selector de variación después de su check marca de verificación blanca con un borde negro, obtengo el mismo ✅️ marca de verificación blanca en un cuadro verde. Captura de pantalla de este comentario para mayor claridad

— Stijn

44

Es posible que no se hayan dado cuenta debido al mal soporte de fuentes. En mi navegador, el fondo verde no aparece.

— user2357112

8

@Stijn, para mí en Chrome, ambos son la marca de verificación verde i.imgur.com/Cv5RTFM.png

— Yisroel Tech

66

Esto no responde a la pregunta, que trata sobre cómo se representa en Firefox, no por qué los emoji están allí.

— oldmud0

73

Firefox está usando una fuente especial para estos caracteres emoji . Emplea una característica relativamente nueva y rara vez utilizada de las fuentes TrueType: glifos de color en capas. Aparte de eso (es decir, tener una fuente especial con glifos pre-coloreados), estos íconos son caracteres Unicode comunes.

Windows tiene soporte nativo para estas fuentes de colores solo en las versiones 8.1 y posteriores , por lo que Firefox instala EmojiOne de forma privada y usa su propio renderizador de fuentes en Windows 7. Esto también explica la ausencia de iconos coloridos de emoji en la mayoría de las otras aplicaciones.

— aitap
fuente

2

Si hay compatibilidad nativa para los glifos de color en capas en Win10, ¿por qué siguen apareciendo en monocromo en, por ejemplo, Edge?

— Bas

55

@Bas, como podemos ver a través de las herramientas de desarrollo de Edge, Segoe UI Emoji no se selecciona para mostrar esta página (otras fuentes monocromas sí). Insertar la fuente en el atributo font-family hace el truco: i.imgur.com/IXiNC86.png

— aitap

44

El soporte de emoji @Bas Coloured está en las últimas vistas previas de Edge y estará en la próxima versión pública.

— Josiah Keller

1

Curiosamente, Firefox en mi cuadro Ubuntu 16.10 muestra glifos en blanco y negro (he arrancado en Win10 después y he confirmado que realmente están coloreados)

— Lucas

2

@Luke Ubuntu tiene soporte de glifos de color planeado para Unity 8.

— stommestack

25

En resumen : Firefox usa una fuente en la que estos símbolos se ven como lo hacen.

Estos personajes son parte del estándar Unicode.

Unicode es un estándar de la industria informática para la codificación, representación y manejo consistentes del texto expresado en la mayoría de los sistemas de escritura del mundo. Desarrollada en conjunto con el estándar Universal Coded Character Set (UCS) y publicada como The Unicode Standard, la última versión de Unicode contiene un repertorio de más de 128,000 caracteres que cubren 135 scripts modernos e históricos, así como múltiples conjuntos de símbolos. -Wikipedia

Por lo tanto, a diferencia de ASCII (que tenía muy pocos), Unicode contiene varios conjuntos de símbolos. Ahora, aunque se ha estandarizado sobre qué código debe representar qué alfabeto o símbolo, Unicode no especifica exactamente cómo debería ser el símbolo. Por lo tanto, todos los sistemas operativos tienen sus propios conjuntos de gráficos de símbolos para verse diferentes. Esto puede incluir algunos de color y otros solo contornos o en blanco y negro.

Además, también es posible que las fuentes tengan su propio conjunto de arte para estos símbolos, de modo que los caracteres puedan ir con la sensación de la aplicación. Incluso dentro de la aplicación, puede tener diferentes páginas con diferentes conjuntos de imágenes. Por lo tanto, puede interactuar con el personaje como lo haría de otra manera, pero se vería diferente.

Puede ver cómo se ven exactamente los emoji (para 🌍🌎🌏, pase al n. ° 1483) en varias plataformas aquí .

— PulseJet
fuente

44

128,000 son muchos iconos para dibujar. No culpo a los artistas por usar iconos en blanco y negro en lugar de a todo color.

— Dan

@Dan, 128,000 es el número de caracteres, no símbolos. Estos también incluyen caracteres de idiomas, que son enormes en número para idiomas como el japonés o el mandarín.

— PulseJet

1

@Dan, solo quise decir que no hay 128,000 símbolos que tendrían que ser coloreados. No digo que no haya muchos para colorear, pero eso no se acerca a los 128,000.

— PulseJet

1

Ah, no quise dar a entender que todos deberían estar coloreados, simplemente ese dibujo de que muchas cosas son suficientes para hacer que no quiera complicar (es decir, colorear) ninguno de ellos. Jaja.

— Dan

2

@Dan nadie dibuja tantos puntos de código, y casi ninguna fuente contiene caracteres para todos los puntos de código Unicode. El renderizador de fuentes sustituirá los glifos de otra fuente cuando la fuente actual no contenga esos glifos. ¿Por qué no hay una fuente que contenga todos los glifos Unicode?

— phuclv

2

Estos caracteres "trabajo" del mismo modo que otros personajes, tales como a, ø, λ, ଶୁ, にy 晨, trabajo. Los caracteres están representados por un número abstracto, que se utiliza para seleccionar e indexar una fuente disponible para mostrar el carácter.

En su sistema, parece que Firefox tiene su propia representación, y tiene acceso a las fuentes que contienen glifos para 🌍, 🌎, 🌏y ✅️. Otras aplicaciones normalmente usarán las fuentes disponibles por el servidor X (o equivalente), por lo que se restringirán a las fuentes que instaló o apuntó a su servidor (por ejemplo, con xset +fpo similar).

Las fuentes multicolores son un desarrollo reciente y aún bastante experimental; Tradicionalmente, los glifos de fuente son un solo color que se puede componer en cualquier fondo.

— Toby Speight
fuente

1

Es diferente en cada navegador, aunque puede agregar una fuente específica a su sitio web, que se carga en estos emojis . Por ejemplo:

Esta publicación sobre Diseño de gráficos ¿Hay alguna fuente gratuita de Emoji? También podría ser interesante. Sin una fuente de icono tan personalizada, debe tener en cuenta que su sitio web se verá diferente en cada navegador.

_{Esta es solo una lista destinada a guiar a las personas a emojis y emoticones unicode más rápido.}

— Agente de recaudación
fuente

0

Esos son solo caracteres Unicode, por lo que cualquier cuadro de texto que admita Unicode puede mostrarlos sin problemas, siempre que la fuente y los glifos estén disponibles en el sistema. Sin embargo, la apariencia de cada carácter Unicode depende del renderizador y la fuente utilizada para ellos.

Tradicionalmente los caracteres se rellenan solo con un solo color. Los emojis de colores son algo completamente nuevo, por lo tanto, su soporte varía de una plataforma a otra. Se han inventado varias técnicas para colorear como PNG incrustados, SVG o máscaras en capas . Pero todos requieren un nuevo procesador que no estaba disponible en sistemas operativos más antiguos.

Como resultado, desde la versión 50.0, Firefox ha incorporado su propio renderizador y fuente para admitir emoji de colores. Puedes encontrarlo en las notas de la versión

Cambiado

Se agregó un conjunto de Emoji incorporado para sistemas operativos sin fuentes de Emoji nativas (Windows 8.0 y versiones anteriores y Linux)

El archivo de fuente se puede encontrar en %FirefoxInstallDir%\fonts\EmojiOneMozilla.ttf

— phuclv
fuente