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 com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!