Incoherencia base en fuentes entre Firefox/Mac y Safari/Mac o Firefox/Win

Question

Notando una anomalía de representación extraña en Firefox 3.5/3.6 (no he probado otras versiones) en Mac OS X. Mirando a mi alrededor, he visto Se informaron y abordaron los problemas, pero la mayoría de ellos estaban rodeando la altura de línea de CSS estableciéndose en normal en oposición a una medida de unidad.

Tome el siguiente código:

<style> 
    h1{ 
     background-color:#f00; 
     font-size:40px; 
     line-height:40px; 
    } 
</style> 

<h1>This is a test</h1> 

En Firefox para Mac, la línea base del texto se encuentra más alto que en los otros navegadores - incluyendo Firefox para Windows. ¿Alguien ha enfrentado este problema antes? Solo Firefox para Mac es el navegador extraño. También noté que esto está basado en fuentes; cambiar a Arial, por ejemplo, se representa constantemente en todas partes. Lamentablemente, cambiar de fuente no es una opción para mí. Y me gustaría evitar crear imágenes de tipografía si puedo.

¡Estoy agradecido por cualquier idea! ¡Gracias por echar un vistazo!

Answer 1

Has presentado un ejemplo muy convincente de las pequeñas diferencias entre la representación de fuentes en Firefox para Mac frente a otros navegadores. Yo diría que FF en Mac se está equivocando aquí ya que incluso la configuración vertical-align: baseline; no cambia el resultado.

Dicho esto, no hay absolutamente ninguna razón para utilizar imágenes aquí para emular el renderizado de ningún navegador. Un sitio web no necesita verse igual en todos los navegadores.

Answer 2

El problema probablemente se debe a Mac y Safari sintonizados con la tipografía mucho más que cualquier otro navegador o sistema operativo. Es más probable que muestre correctamente las fuentes como deberían mostrarse. He leído sobre esto en innumerables ocasiones a lo largo de los años pero, desafortunadamente, no recuerdo nada más allá de eso. Estoy seguro de que alguien vendrá con un enlace que explica esto más.

Answer 3

Sé que esta es una pregunta antigua pero me encontré con ella cuando buscaba una solución para el mismo problema. A partir de una gran cantidad de investigaciones y pruebas que parece ser una de esas 'ventanas contra el resto del mundo' cosas de tipo (sorpresa, sorpresa!) Así que aquí está mi jQuery fijar ...

var OSName=""; 
if (navigator.appVersion.indexOf("Win")!=-1) OSName="windows"; 
$('html').addClass(OSName); 

Entonces sólo dirigidos al h1 con html.windows h1 para arreglar la diferencia con css en Windows.

¡Podría ayudar a alguien en el futuro!