La fuente se muestra de manera diferente en Firefox frente a Chrome

Parece que mi barra de menú se muestra con una extensión de fuente diferente en Firefox que en Chrome. Ver lo siguiente:

Aquí está el CSS aplicado a este elemento:

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

Por lo que puedo decir, todo lo relacionado con esa fuente es exactamente el mismo, pero aún se muestran de manera diferente (ver foto). ¿Por qué?

Chrome usa el motor de renderizado WebKit. Firefox usa el motor Gecko. Ambos interpretan y muestran el tipo de pantalla de forma ligeramente diferente, al igual que los motores gráficos DirectX y Vega utilizados en IE9 + y Opera.

No puede forzar a los navegadores a representar el texto de manera idéntica, pero puede hacer un par de cosas para asegurarse de que su navegación ocupe el mismo ancho en los navegadores:

1. Use imágenes o SVG en lugar de tipo para los elementos de su barra de navegación. Esto puede resultar útil si es poco probable que su área de navegación cambie con frecuencia. por ejemplo, www.apple.com

2. Fije el ancho de cada elemento de navegación con CSS. El tamaño del texto seguirá siendo diferente entre los navegadores, pero si le da a cada <li>elemento en su área de navegación un ancho de píxel fijo, el cuadro delimitador de cada enlace será muy similar en todos los navegadores y el ancho total del área de navegación debería ser el mismo.

Las diferencias en la representación de fuentes entre diferentes navegadores (y en diferentes sistemas operativos) son una realidad. Solo tiene que asegurarse de que si la fuente se muestra en diferentes anchos, su diseño aún puede hacer frente.

En caso de que alguien se encuentre con esto, para mí el problema fue letter-spacing . Chrome y Firefox manejan la propiedad de manera diferente.

Mi problema fue el letter-spacing estaba afectando la posición de otros elementos; específicamente algunas imágenes en el menú de navegación. Al eliminar la propiedad, mi problema se resolvió instantáneamente.

También he leído que el uso específico de .pointvalores puede tener efectos de alteración entre los 2 navegadores, lo cual fue cierto en mi caso.

tipo de problema mencionado aquí

puedes restablecer tu CSS

http://developer.yahoo.com/yui/reset/ espero que no tengas alguna pista

Descubrí que webkit admitirá px para el tamaño de fuente, pero para cosas como el espaciado entre letras, lo ignorarán todo si no los usa.

Después de probar 6 navegadores / 4 motores de renderizado en dos SO. He descubierto que la mayoría eran iguales incluso con el espacio entre líneas. Examinaré la diferencia con Windows y Linux en un minuto.

Pensé que la fuente Palatino estaba disponible en todas partes, pero Chrome volvió a ser romana, que es un poco más pequeña, las fuentes predeterminadas tuvieron los mismos resultados (diferentes de Chrome), lo que me confundió un poco.

De todos modos, si especifica times roman o usa @fontface para suministrar archivos de fuentes. es posible que pueda hacer que sus barras de navegación sean más elegantes ;-)

Tuve un problema similar y encontré una solución:

Utilizando:

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

En Firefox, se ve muy bien. En Chrome, el espacio entre letras era extraño. Eliminar el optimizelegibilityestilo hizo el truco. Ambos navegadores se procesan de manera idéntica ahora.

Decidí eliminar el estilo para webkit y dejarlo en su lugar para otros navegadores. Se ve bien ahora.

Tuve un problema similar con Open-Sans, esto lo hizo por mí:

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