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é?
css
firefox
google-chrome
Goro
fuente
fuente
Respuestas:
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:
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
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.fuente
letter-spacing
con elementos SVG.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.
fuente
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
.point
valores puede tener efectos de alteración entre los 2 navegadores, lo cual fue cierto en mi caso.fuente
tipo de problema mencionado aquí
puedes restablecer tu CSS
http://developer.yahoo.com/yui/reset/ espero que no tengas alguna pista
fuente
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.
fuente
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 ;-)
fuente
Tuve un problema similar y encontré una solución:
Utilizando:
En Firefox, se ve muy bien. En Chrome, el espacio entre letras era extraño. Eliminar el
optimizelegibility
estilo 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.
fuente
Tuve un problema similar con Open-Sans, esto lo hizo por mí:
fuente