Executando verificação de segurança...
1
Kazinho
1 min de leitura ·

[Dúvida] Não consigo renderizar emojis em meus navegadores

Estou aprendendo a desenvolver em HTML e CSS, mas aconteceu algo que me fez quebrar a cabeça: não conseguir renderizar emojis em meus navegadores

A princípio pode parecer algo simples, porém acabei ficando incomodado com isso
Já sabia desse problema e tentei resolver outras vezes, mas não tive resultados

Meu computador é relativamente antigo, um windows 7 e já tentei Chrome, Edge, Firefox, Brave, Vivaldi
O único que funcionou foi o Firefox, mas não utilizo porque fica travando um pouco no meu pc

Chrome

Chrome

Firefox

Firefox

Atualmente estou utilizando dois navegadores, um padrão e o Firefox apenas para isso
Gostaria de saber se há alguma configuração, ou extensão que me permita essa vizualização no navegador que já utilizo

Carregando publicação patrocinada...
1
CristianoSword

tem varios pacotes de wemojis que não são suportados por alguns navegadores. Eu sempre tento usar algum famoso visto no google mesmo e testado no Chrome e não tenho problemas.
Infelismente ou felismente o Chrome é o navegador mais usado e sigo por ai quando faço meus códigos.

1
1
FelipeFernandes

Não sei como você está fazendo pra inserir os emojis, mas caso não esteja usando os códigos dos emojis recomendo utilizar, quando for pegar a referência do código já poderá vê se o emoji está funcionando no seu navegador e se a aparência dele agrada você.

1
GabrielSozinho

Isso é devido provavelmente à fonte que você escolheu.

Você pode definir uma fonte com suporte para emojis como noto-fonts-emoji e fonts-noto-color-emoji. Ou você pode usar uma biblioteca JavaScript como a Twemoji.

Para usar ela é simples, acho até que vou fazer um post explicando isso.

Você vai ter que adicionar essa tag dentro da tag head do seu HTML (para importar o Twemoji):

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

E depois do fechamento da tag <body>, você adiciona essa tag:

<script>
    twemoji.parse(document.body);
</script>

Com esse código, o Twemoji vai percorrer toda a página procurando por emojis e trocar eles por uma imagem, o mesmo emoji vai ser visto por todos os navegadores.

Ah, o emoji vai ficar gigante, então você vai ter que ajustar o tamanho dele através do CSS, só de copiar já vai ficar certo (você pode ajustar o tamanho se ficar errado):

.emoji {
    width: 1rem;
    height: 1rem;
}
1
OpenComments

Os emojis são um tipo de caractere que é suportado pelas últimas versões dos principais navegadores, mas pode haver alguns fatores que impedem a renderização correta deles em seu navegador. Uma possível solução para esse problema é atualizar o seu navegador para a última versão disponível, o que garantirá o suporte a emojis e outras novas funcionalidades. É importante também verificar se o seu sistema operacional está atualizado, pois as atualizações do sistema operacional podem incluir suporte a novos caracteres e outras melhorias de compatibilidade com os navegadores. Além disso, é possível que o seu navegador esteja configurado para não mostrar emojis, neste caso, você pode procurar nas configurações do navegador por opções relacionadas a emojis e habilitá-las.

Este comentário foi gerado por uma inteligência artificial. Para saber mais, leia esta publicação.