Como esses ícones funcionam: 🌍🌎🌏✅️?

123

Eu posso ver esses caracteres como ícones coloridos:

🌍🌎🌏✅️

Só funciona no Firefox para mim. Se você não consegue ver os caracteres em cores, fica assim no meu sistema (provavelmente depende da fonte):

Descrição da imagem

Eu posso até vê-los nos títulos firebug e tab:

Descrição da imagem

E há arquivo completo deles. Também fiz este documento. Animação com títulos , o que demonstra que eles funcionam mesmo fora do HTML.

O que é isso?

firefox unicode

— Tomáš Zato
fonte

Comentários não são para discussão prolongada; esta conversa foi movida para o bate-papo .

— Journeyman Geek

Estou usando o Opera e definitivamente não os vejo da maneira que você mostrou na imagem "parece com isso". Então, eu estou tentado a editar que fora de sua pergunta, mas não seria muito substancial ...

— Stephan Bijzitter

37

@StephanBijzitter: O fato de você e outras pessoas não verem os ícones dessa maneira é por que a imagem é importante. Não o remova.

— user2357112

3

youtube.com/watch?v=tITwM5GDIAI

— J. Hougaard 03/02

2

Palavra-chave: OpenType-SVG ( stateofwebtype.com/#OpenType-SVG , color.typekit.com )

— Prinzhorn 5/17

145

Esses caracteres são emojis reconhecidos pelos padrões Unicode, que definem o que cada caractere apresenta.

A aparência exata deles é diferente para cada sistema operacional e aplicativo, mas todos representam a mesma coisa.

O globo (🌏) é um caractere Unicode 1F30Fe é chamado EARTH GLOBE ASIA-AUSTRALIA . o segundo (✅) é chamado WHITE HEAVY CHECK MARK e é Unicode 2705.

Dessa maneira, existem milhares de emojis, alguns aos quais todos os aplicativos suportam e outros com menos suporte. Veja a lista completa aqui http://www.fileformat.info/info/emoji/browsertest.htm

— Yisroel Tech
fonte

56

A aparência exata deles depende da fonte usada, porque fonte é o que define a aparência de um personagem e emojis são apenas caracteres.

— totymedli

23

Na verdade, o segundo é (como você disse) WHITE HEAVY CHECK MARK combinado com o VARIATION SELECTOR-16 . ✅️ copiado da pergunta parece uma marca de seleção branca em uma caixa verde, ✅ copiado da sua resposta parece uma marca de seleção branca com uma borda preta e quando colo o seletor de variação após sua ✅ marca de seleção branca com uma borda preta, recebo o mesma marca de seleção branca em uma caixa verde. Captura de tela deste comentário para clareza

— Stijn

4

Eles podem não ter percebido devido ao mau suporte de fonte. No meu navegador, o pano de fundo verde não aparece.

— User2357112

8

@Stijn, para mim no Chrome, os dois são a marca de seleção verde i.imgur.com/Cv5RTFM.png

— Yisroel Tech

6

Isso não responde à pergunta, que é sobre como está sendo renderizada no Firefox, e não por que os emoji estão lá.

— precisa saber é o seguinte

73

O Firefox está usando uma fonte especial para esses caracteres emoji . Está empregando um recurso relativamente novo e raramente usado de fontes TrueType: glifos de cores em camadas. Fora isso (ou seja, ter uma fonte especial com glifos pré-coloridos), esses ícones são caracteres Unicode comuns.

O Windows tem suporte nativo para essas fontes coloridas apenas nas versões 8.1 e posteriores, portanto, o Firefox instala o EmojiOne em particular e usa seu próprio renderizador de fontes no Windows 7. Isso também explica a ausência de ícones emoji coloridos na maioria dos outros aplicativos.

— aitap
fonte

2

Se houver suporte nativo para glifos de cores em camadas no Win10, por que eles ainda aparecem em monocromático no Edge, por exemplo?

— Bas

5

@Bas, como podemos ver pelas ferramentas de desenvolvedor do Edge, o Segoe UI Emoji não é selecionado para exibir esta página (outras fontes monocromáticas). Inserir a fonte no atributo família da fonte faz o truque: i.imgur.com/IXiNC86.png

— aitap 02/02

4

O suporte ao emoji colorido @Bas está nas últimas visualizações do Edge e na próxima versão pública.

— Josiah Keller

1

Curiosamente, o Firefox no meu Ubuntu 16.10 caixa exibe glifos preto e branco (eu iniciar no Win10 depois e confirmou que eles estão realmente colorido)

— Lucas

2

@Luke Ubuntu suporte tem glifo cor prevista para Unidade 8.

— stommestack

25

Em resumo : o Firefox usa uma fonte na qual esses símbolos têm a mesma aparência.

Esses caracteres fazem parte do padrão Unicode.

Unicode é um padrão do setor de computação para a codificação, representação e manipulação consistentes de texto expresso na maioria dos sistemas de escrita do mundo. Desenvolvida em conjunto com o padrão UCS (Universal Coded Character Set) e publicada como The Unicode Standard, a versão mais recente do Unicode contém um repertório de mais de 128.000 caracteres, abrangendo 135 scripts modernos e históricos, além de vários conjuntos de símbolos. -Wikipedia

Assim, diferentemente do ASCII (que tinha muito poucos), o Unicode contém vários conjuntos de símbolos. Agora, embora tenha sido padronizado em qual código deve representar qual alfabeto ou símbolo, o Unicode não especifica exatamente como o símbolo deve ser. Assim, todos os sistemas operacionais têm seus próprios conjuntos de gráficos de símbolos para parecerem diferentes. Isso pode incluir alguns sendo coloridos e outros apenas contornos ou preto e branco.

Além disso, também é possível que as fontes tenham seu próprio conjunto de arte para esses símbolos, para que os caracteres possam acompanhar a sensação do aplicativo. Mesmo dentro do aplicativo, você pode ter páginas diferentes usando diferentes conjuntos de imagens. Assim, você pode interagir com o personagem como faria de outra maneira, mas seria apenas diferente.

Você pode ver exatamente como emoji (para for, pule para # 1483) em várias plataformas aqui .

— PulseJet
fonte

4

128.000 são muitos ícones para desenhar. Não culpo os artistas por usarem ícones em preto e branco em vez de cores.

— Dan

@ Dan, 128.000 é o número de caracteres, não símbolos. Também incluem caracteres de idioma, que são enormes em número para idiomas como japonês ou mandarim.

— precisa saber é o seguinte

1

@ Dan, eu só quis dizer que não existem 128.000 símbolos que precisariam ser coloridos. Não estou dizendo que não há muitos para colorir, mas isso não chega nem perto de 128.000.

— precisa saber é o seguinte

1

Ah, eu não pretendia sugerir que todos deveriam ser coloridos, apenas aquele desenho de que muita coisa é suficiente para me fazer não querer complicar (ou seja, colorir) qualquer uma delas. Haha

— Dan

2

@Dan ninguém desenha tantos pontos de código e quase nenhuma fonte contém caracteres para todos os pontos de código Unicode. O representante da fonte substituirá glifos de outra fonte quando a fonte atual não contiver esses glifos. Por que não há uma fonte que contém todos os glifos Unicode?

— Phuclv

2

Esses personagens "trabalho" da mesma forma que outros personagens, como a, ø, λ, ଶୁ, にe 晨, trabalho. Os caracteres são representados por um número abstrato, usado para selecionar e indexar uma fonte disponível para exibir o caractere.

Em seu sistema, parece que o Firefox faz o seu próprio processamento, e tem acesso a fontes que contêm glifos para 🌍, 🌎, 🌏e ✅️. Outros aplicativos normalmente usam as fontes disponibilizadas pelo servidor X (ou equivalente), portanto, restrinja-se às fontes nas quais você instalou ou apontou o servidor (por exemplo, com xset +fpou similar).

Fontes coloridas são um desenvolvimento recente e ainda bastante experimental; tradicionalmente, os glifos de fonte são de uma única cor que pode ser composta em qualquer plano de fundo.

— Toby Speight
fonte

1

É diferente em cada navegador, embora você possa adicionar uma fonte específica ao seu site, carregada nesses emojis . Por exemplo:

Este post sobre Design Gráfico Existem fontes gratuitas de Emoji? também pode ser interessante. Sem uma fonte de ícone personalizada, lembre-se de que seu site terá uma aparência diferente em todos os navegadores.

_{Esta é apenas uma lista destinada a orientar as pessoas a emoticons e smileys unicode mais rapidamente.}

— RaisingAgent
fonte

0

Esses são apenas caracteres Unicode, portanto, qualquer caixa de texto compatível com Unicode pode exibi-los sem problemas, desde que a fonte e os glifos estejam disponíveis no sistema. No entanto, a aparência de cada caractere Unicode depende do renderizador e da fonte usada para eles.

Tradicionalmente, os caracteres são preenchidos apenas com uma única cor. Emojis coloridos são uma novidade, portanto, seu suporte varia de plataforma para plataforma. Várias técnicas foram inventadas para colorir como PNGs, SVGs incorporados ou máscaras em camadas . Mas todos eles exigem um novo renderizador que não estava disponível em sistemas operacionais mais antigos.

Como resultado, desde a versão 50.0, o Firefox incorporou seu próprio renderizador e fonte para suportar emojis coloridos. Você pode encontrá-lo nas notas de versão

Alterado

Adicionado um conjunto de Emoji embutido para sistemas operacionais sem fontes Emoji nativas (Windows 8.0 e inferior e Linux)

O arquivo de fonte pode ser encontrado em %FirefoxInstallDir%\fonts\EmojiOneMozilla.ttf

— phuclv
fonte