Questão Como esses ícones funcionam: 🌍🌎🌏️?


Eu posso ver esses personagens como ícones coloridos:

️

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

image description

Eu posso até vê-los em títulos firebug e tabs:

image description

image description

image description

E há arquivo completo deles. Eu também fiz isso animação document.title com eles, o que demonstra que eles funcionam mesmo fora do HTML.

O que é isso?


120


origem


Comentários não são para discussão extensa; esta conversa foi mudou-se para conversar. - Journeyman Geek♦
Eu estou usando o Opera e eu definitivamente não os vejo do jeito que você mostrou na imagem "parece com isso". Então, estou tentado a editar isso da sua pergunta, mas não seria muito substancial ... - Stephan Bijzitter
@StephanBijzitter: O fato de você e outros não verem os ícones dessa maneira é porque a imagem é importante. Não o remova. - user2357112
youtube.com/watch?v=tITwM5GDIAI - J. Hougaard
Palavra-chave: OpenType-SVG (stateofwebtype.com/#OpenType-SVG, color.typekit.com) - Prinzhorn


Respostas:


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

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

O globo () é um caractere Unicode 1F30F e é chamado  GLOBO TERRA ÁSIA-AUSTRÁLIA. o segundo () é chamado  MARCA DE VERIFICAÇÃO PESADA BRANCA e é Unicode 2705.

Dessa forma, existem milhares de emojis, alguns que todo aplicativo suporta e alguns com menos suporte. Veja a lista completa aqui http://www.fileformat.info/info/emoji/browsertest.htm


144



A aparência exata para eles depende da fonte que você usa, porque as fontes são as que definem como um personagem deve parecer e os emojis são apenas caracteres. - totymedli
Na verdade, o segundo é (como você disse) MARCA DE VERIFICAÇÃO PESADA BRANCA combinado com SELETOR DE VARIAÇÃO-16. ️ copiado da pergunta parece uma marca branca em uma caixa verde, copiado de sua resposta parece uma marca de seleção branca com uma borda preta, e quando eu colo o seletor de variação após a marca branca com uma borda preta, eu recebo o mesmo ️ marca de seleção branca em uma caixa verde. Captura de tela deste comentário para maior clareza - Stijn
Eles podem não ter notado devido ao suporte de fonte ruim. No meu navegador, o pano de fundo verde não aparece. - user2357112
@Stijn, para mim no Chrome, os dois são a marca de seleção em caixa verde i.imgur.com/Cv5RTFM.png - Yisroel Tech
Isso não responde a pergunta, que é sobre como está sendo renderizado no Firefox, não porque o emoji está lá. - oldmud0


O Firefox está usando um fonte especial Para estes personagens de emoji. Ele 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 posterioresAssim, o Firefox instala o EmojiOne de forma privada e usa seu próprio renderizador de fonte para ele no Windows 7. Isso também explica a ausência de ícones de emoji coloridos na maioria dos outros aplicativos.


72



Se há suporte nativo para glifos de cores em camadas no Win10, por que eles ainda aparecem em monocromático, por exemplo, no Edge? - Bas
@Bas, como podemos ver através das ferramentas para desenvolvedores Edge, o Segoe UI Emoji não é selecionado para exibir esta página (outras fontes monocromáticas). Inserir a fonte no atributo font-family faz o truque: i.imgur.com/IXiNC86.png - aitap
O suporte de emoji colorido do @Bas está nas últimas visualizações do Edge e estará na próxima versão pública. - Josiah Keller
Curiosamente, o Firefox na minha caixa Ubuntu 16.10 exibe glifos preto e branco (eu iniciei no Win10 depois e confirmei que eles são realmente coloridos) - Luke
@Luke O Ubuntu tem suporte para glifos coloridos planejado para o Unity 8. - Jop V.


Em resumo: O Firefox usa um Fonte em que esses símbolos se parecem com o que eles fazem.

Esses caracteres fazem parte do padrão Unicode.

O Unicode é um padrão da indústria de computação para codificação, representação e manipulação consistentes de texto expresso na maioria dos sistemas de escrita do mundo. Desenvolvido em conjunto com o padrão UCS (Universal Coded Character Set) e publicado 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, ao contrário 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 o 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 alguns sendo 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, de modo 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 forma, mas seria diferente.

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


25



128.000 é um muito de ícones para desenhar. Eu não culpo os artistas por irem com ícones em preto e branco em vez de cores. - Dan
@ Dan, 128.000 é o número de caracteres, não símbolos. Estes incluem caracteres de idioma também, que são enormes em número de idiomas como japonês ou mandarim. - PulseJet
@ Dan, eu só quis dizer que não há 128.000 símbolos que deveriam ser coloridos. Não dizendo que não há muitos para colorir, mas que não chega nem perto de 128.000. - PulseJet
Ah, eu não quis dizer que todos deveriam ser coloridos, apenas o desenho que muitos qualquer coisa é o suficiente para me fazer não querer complicar (ou seja, cor) qualquer um deles. Haha - Dan
@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 renderizador de fontes substituto glifos de outra fonte quando a fonte atual não contém esses glifos. Por que não há uma fonte que contenha todos os glifos Unicode? - phuclv


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

No seu sistema, parece que o Firefox faz sua própria renderização, e tem acesso a fontes contendo glifos para, ,  e ️. Outros aplicativos normalmente usarão as fontes disponibilizadas pelo servidor X (ou equivalente), portanto, restrinjam-se às fontes que você instalou ou apontou para seu servidor (por exemplo, com xset +fp ou similar).

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


2





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

Este post mais sobre Design Gráfico Existe alguma fonte Emoji grátis? também pode ser interessante. Sem essa fonte de ícones personalizada, você deve ter em mente que seu site será diferente em todos os navegadores.


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


1





Esses são apenas caracteres Unicode, portanto, qualquer caixa de texto que suporte 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 algo muito novo, por isso seu suporte varia de plataforma para plataforma. Várias técnicas foram inventadas para colorir gostar PNGs, SVGs ou máscaras em camadas incorporadas. 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 no notas de lançamento

Mudou

Adicionado um conjunto Emoji integrado 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


0