A fonte é exibida de maneira diferente no Firefox e no Chrome

Parece que minha barra de menus é exibida com uma extensão de fonte diferente no Firefox e no Chrome. Veja o seguinte:

Aqui está o CSS aplicado a este elemento:

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

Tanto quanto eu posso dizer, tudo sobre essa fonte é exatamente o mesmo, mas eles ainda são exibidos de maneira diferente (veja a foto). Por quê?

O Chrome usa o mecanismo de renderização do WebKit. O Firefox usa o mecanismo Gecko. Ambos interpretam e exibem o tipo de maneira um pouco diferente, assim como os mecanismos gráficos DirectX e Vega usados ​​no IE9 + e no Opera.

Você não pode forçar os navegadores a renderizarem o mesmo texto, mas pode fazer algumas coisas para garantir que sua navegação ocupe a mesma largura nos navegadores:

1. Use imagens ou SVGs em vez do tipo para os elementos da barra de navegação. Isso pode ser útil se for improvável que sua área de navegação mude com frequência. por exemplo, www.apple.com

2. Corrija a largura de cada elemento de navegação com CSS. O tamanho do texto ainda parecerá diferente entre os navegadores, mas se você atribuir a cada <li>elemento em sua área de navegação uma largura fixa de pixels, a caixa delimitadora de cada link será muito semelhante nos navegadores e a largura total da área de navegação deverá ser a mesma.

As diferenças na renderização da fonte entre diferentes navegadores (e em diferentes sistemas operacionais) são um fato real. Você só precisa garantir que, se a fonte for exibida em larguras diferentes, seu design ainda aguentará.

Caso alguém se depare com isso, para mim o problema era letter-spacing. Chrome e Firefox manipulam a propriedade de maneira diferente.

Meu problema era letter-spacingestar afetando a posição de outros elementos; especificamente algumas imagens no menu de navegação. Ao remover a propriedade, meu problema foi resolvido instantaneamente.

Também li que o uso específico de .pointvalores pode ter efeitos alterados entre os 2 navegadores, o que era verdade no meu caso.

tipo da mesma questão declarada aqui

você pode redefinir seu css

http://developer.yahoo.com/yui/reset/ espero que você não tenha nenhuma pista

Descobri que o webkit suportará px para o tamanho da fonte, mas para coisas como espaçamento entre letras, eles ignoram tudo juntos se você não os usar.

Após testar 6 navegadores / 4 mecanismos de renderização em dois sistemas operacionais. Descobri que a maioria era a mesma, mesmo com espaçamento entre linhas. Examinarei a diferença com o Windows e o Linux em um minuto.

Eu pensei que a fonte Palatino estivesse disponível em todos os lugares, mas o chrome voltou aos tempos romanos, que são um pouco menores, as fontes padrão tiveram os mesmos resultados (cromados diferentes), o que me enganou um pouco.

De qualquer forma, se você especificar horários romanos ou usar @fontface para fornecer arquivos de fonte! você pode tornar suas barras de navegação mais lisas ;-)

Eu tive um problema semelhante e encontrei uma solução:

Usando:

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

No Firefox, parece ótimo. No Chrome, o espaçamento entre letras era estranho. Remover o optimizelegibilityestilo fez o truque. Ambos os navegadores são processados ​​de forma idêntica agora.

Decidi remover o estilo do webkit e deixá-lo no lugar de outros navegadores. Parece bom agora.

Eu tive um problema semelhante com o Open-Sans, isso fez comigo:

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