1
resposta

[Dúvida] Divergência de renderização entre navegadores.

Olá!
Estou fazendo o curso de responsividade e enfrento uma dificuldade em relação a renderizações das estrelas (★☆) pelo navegador na sessão de depoimentos. Durante o curso, utilizei o Firefox para visualizar o site e notei que as estrelas cheias e vazias não se alinham apesar de pertencerem a mesma classe e herdarem as mesmas propriedades, como a fonte em 32 px. Entretanto, testei no Safari e elas estavam perfeitamente alinhadas e idênticas as do curso. Porque isso ocorre? Há algum ajuste que posso realizar no código para ser renderizado de alguma forma específica no Firefox ou de maneira universal nos navegadores mais populares?

Firefox:
Captura de tela das estrelas de avaliacao com tamanhos diferentes

Safari:
Captura de tela das estrelas de avaliacao com tamanhos diferentes

1 resposta

Oi, Bruno.

O que você está observando ocorre porque caracteres Unicode (como as estrelas ★ e ☆) são tratados como texto. Cada navegador utiliza um motor de renderização próprio e, se a fonte definida no CSS não tiver uma representação exata para esses símbolos, o navegador busca em fontes reserva (fallback) do sistema operacional. O Firefox e o Safari podem escolher fontes diferentes para preencher esses vácuos, o que causa variações no tamanho, alinhamento vertical e espessura dos glifos.

Para resolver isso e garantir um visual consistente, algumas abordagens recomendadas:

1. Uso de SVGs (Recomendado)

A forma mais segura de garantir que as estrelas sejam idênticas em qualquer lugar é utilizando arquivos SVG ou vetores inline. Diferente do texto, o SVG é um gráfico e não depende da interpretação de fontes do navegador.

2. Fontes de Ícones

Utilizar bibliotecas como Font Awesome ou Google Symbols garante que o desenho do ícone seja padronizado, pois você estará carregando um arquivo de fonte específico para esses símbolos.

Como você está estudando responsividade e acessibilidade, vale lembrar que o uso de SVGs com a tag <title> ou atributos aria-label também ajuda leitores de tela a entenderem que se trata de uma avaliação por estrelas.

Espero que essas orientações ajudem a padronizar seu projeto.

Conteúdos relacionados
Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!