¿Por qué cambiar Monoface negrita verticalmente en Windows?

StackOverflow https://stackoverflow.com/questions/2432328

Pregunta

En Firefox 3.6, Internet Explorer 7 y Opera 10 en Windows, este código HTML tiene un comportamiento extraño: 

<html><head></head>
<style>
span {
    font-family: monospace; background-color: green;
}
span.b {
    font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

El lapso negrita en el centro se desplaza hacia abajo en un píxel. Eso no ocurre para el resto.

¿Por qué? ¿Cómo puedo solucionarlo?

¿Fue útil?

Solución

  

¿Por qué?

Excelente pregunta. Acabamos de pasar media hora tratando de averiguar el por qué, pero en vano. no parece la solución de Marcgg a trabajar, o bien, el desplazamiento es todavía allí. Google vuelve a nada. Esto sólo parece ocurrir en Windows, no sólo en los navegadores que mencionas, sino también en Opera 9 y IE6. No en Firefox 2.0 embargo. Desconcertante.

  

¿Cómo puedo solucionarlo?

La única solución que ha funcionado hasta ahora para mí es la siguiente: 

span {
    font-family: Courier; background-color: green;
}
span.b {
    font-weight: bold;
}

I.E., Especificando Courier en lugar de espacio sencillo. Esto hace consistentemente en todos los navegadores que probé (IE6, Opera 9, FF 2.0 bajo Windows 2000; Opera 10, FF 3, y Konqueror bajo Ubuntu). En cuanto a por qué, todavía no tengo ni idea.

Otros consejos

Es sólo un efecto óptico. Coge una captura de pantalla y zoom en:. Verá la línea base del texto no cambia en absoluto

Debe fijarse si elige un contraste de color diferente.

Actualizar

texto alternativo http://img690.imageshack.us/img690/421/opticaleffect .png

El problema es la letra "Courier New", que es la fuente por defecto utilizado mis mayoría de los navegadores de Windows cuando se solicita "monovolumen". Para la variante en negrita, la línea de base se encuentra en una diferente offset: 

<html><head></head>
<style>
span {
    font-family: "Courier New"; background-color: green;
}
span.b {
    font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

Con este código, se puede ver que el texto se desplaza hasta media (= línea de base diferente offset), pero el color de fondo ahora está alineado correctamente.

La solución es solicitar "Courier" como fuente y para evitar "Courier New".

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top