Perché Monoface grassetto spostare verticalmente su Windows?

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

Domanda

In Firefox 3.6, IE7 e Opera 10 su Windows, questo HTML ha un comportamento strano: 

<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>

L'arco grassetto nel mezzo è spostata verso il basso di un pixel. Ciò non accade per altri tipi di carattere.

Perché? Come posso risolvere il problema?

È stato utile?

Soluzione

  

Perché?

Ottima domanda. Appena trascorso una mezz'ora a cercare di capire il motivo per cui, senza alcun risultato. La soluzione di Marcgg non sembra funzionare, sia, l'offset è ancora lì. Google salta fuori nulla. Questo sembra accadere solo su Windows, non solo nei browser che voi dite, ma anche in Opera 9 e IE6. non in Firefox 2.0 però. Sconcertante.

  

Come posso risolvere il problema?

L'unica soluzione che ha funzionato finora per me è questa: 

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

vale a dire., Specificando Corriere invece di spaziatura fissa. Questo rende costantemente in tutti i browser che ho provato (IE6, Opera 9, 2.0 FF in ambiente Windows 2000, Opera 10, FF 3, e Konqueror sotto Ubuntu). Quanto al motivo per, non ho ancora idea.

Altri suggerimenti

E 'solo un effetto ottico. Prendete uno screenshot e zoom:. Vedrete la linea di base del testo non cambia affatto

Si deve fissarsi se si sceglie un diverso contrasto di colore.

Aggiornamento

alt text http://img690.imageshack.us/img690/421/opticaleffect .png

Il problema è il tipo di carattere "Courier New", che è il font di default usato il mio maggior parte dei browser di Windows quando viene richiesto "monovolume". Per la variante grassetto, la linea di base è ad un differente 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 questo codice, si può vedere che il testo centrale è spostata verso l'alto (= Offset diversa linea di base), ma il colore di sfondo è ora allineato correttamente.

La soluzione è quella di richiedere "Courier", come un tipo di carattere e per evitare "Courier New".

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top