Mesma fonte, exceto seu peso parece diferente em diferentes navegadores

O texto é exibido corretamente no Chrome. Eu quero que seja exibido dessa maneira em todos os navegadores. Como posso fazer isso?

Cromada:
cromada

ATUALIZAÇÃO: Corrigido no Safari com -webkit-font-smoothing: antialiased;

Raposa de fogo:
Raposa de fogo

Este é o CSS:

 font-family: Georgia; font-weight: normal; font-size: 16pt; color: #444444; -webkit-font-smoothing: antialiased; 

E um violino: http://jsfiddle.net/jnxQ8/1/

   

Certifique-se de que a fonte é a mesma para todos os navegadores. Se for a mesma fonte, o problema não tem solução usando o CSS entre navegadores .

Como cada navegador tem seu próprio mecanismo de renderização de fonte, eles são todos diferentes. Eles também podem diferir em versões posteriores ou em diferentes sistemas operacionais.

UPDATE : Para aqueles que não entendem o navegador e as diferenças de renderização de fonte OS, leia isto e isso .

No entanto, a diferença nem é perceptível pela maioria das pessoas e os usuários aceitam isso. Esqueça o design de vários navegadores com pixels perfeitos, a menos que você esteja:

  1. Tentando desativar a renderização de subpixel por CSS (nem todos os navegadores permitem isso e o texto pode ser feio …)
  2. Usando imagens (os resources são exigentes e difíceis de manter)
  3. Substituindo Flash (precisa de alguma programação e não funciona no iOS)

ATUALIZAÇÃO : verifiquei a página de exemplo. Ajustar o kerning por renderização de texto deve ajudar:

 text-rendering: optimizeLegibility; 

Mais referências aqui:

  1. Parte da renderização de fonte é controlada por font-smoothing (como mencionado) e outra parte é text-rendering . Ajustar essas propriedades pode ajudar, pois seus valores padrão não são os mesmos nos navegadores.
  2. Para o Chrome, se ainda não estiver exibindo OK para você, tente este hack de sombra de texto . Deve melhorar a renderização da fonte do Chrome, especialmente no Windows. No entanto, a sombra de texto enlouquecerá no Windows XP. Seja cuidadoso.

Para padronizar melhor suas fonts incorporadas de tipo de fonte @ em navegadores, tente include as informações abaixo na sua declaração @ font-face ou no estilo de fonte de seu corpo:

 speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; 

Atualmente, parece não haver uma correção universal em todas as plataformas e compilações de navegador. Como afirmado com freqüência, todos os navegadores / SO têm diferentes mecanismos de renderização de texto.

Há ótimas informações sobre isso aqui: https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Ainda experimentando, mas até agora uma solução minimamente invasiva, voltada apenas para FF é:

 body { -moz-osx-font-smoothing: grayscale; } 

Tente -webkit-font-smoothing: subpixel-antialiased;

Eu colecionei e testei soluções discutidas:

Windows10 Prof x64:

 * FireFox v.56.0 x32 * Opera v.49.0 * Google Chrome v.61.0.3163.100 x64-bit 

macOs X Serra v.10.12.6 Mac mini (meados de 2010):

 * Safari v.10.1.2(12603.3.8) * FireFox v.57.0 Quantum * Opera v49.0 

Semi (ainda micro gordura no Safari) resolveu fonts gordurosas:

 text-transform: none; // mac ff fix -webkit-font-smoothing: antialiased; // safari mac nicer -moz-osx-font-smoothing: grayscale; // fix fatty ff on mac 

Não tem efeito visual

 line-height: 1; text-rendering: optimizeLegibility; speak: none; font-style: normal; font-variant: normal; 

Efeito visual errado:

 -webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari text-rendering: geometricPrecision !important; //more fatty in safari 

não se esqueça de definir! importante ao testar ou ter certeza de que seu estilo não é substituído

Eu não acho que usar “pontos” para o tamanho da fonte em uma canvas seja uma boa ideia. Tente usar px ou em no tamanho da fonte.

Do W3C :

Não especifique o tamanho da fonte em pt ou outras unidades de tamanho absoluto. Eles são renderizados de forma inconsistente em todas as plataformas e não podem ser redimensionados pelo Agente do Usuário (por exemplo, navegador).

Eu tenho muitos sites com este problema e finalmente encontrei uma correção para fonts do firefox sendo mais espessa do que o cromo.

Você precisa desta linha ao lado do seu -webkit fix -moz-osx-font-smoothing: grayscale;

 body{ text-rendering: optimizeLegibility; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 

Experimente text-rendering: geometricPrecision; .

Diferente da text-rendering: optimizeLegibility; de text-rendering: optimizeLegibility; , cuida de problemas de kerning ao dimensionar fonts, enquanto o último ativa kerning e ligaturas.