Por que Monoface negrito deslocar verticalmente no Windows?

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

Pergunta

No Firefox 3.6, IE7 e Opera 10 no Windows, este HTML tem um comportamento estranho: 

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

A extensão negrito no meio é deslocado para baixo por um pixel. Isso não acontece para outras fontes.

Por que isso? Como posso corrigi-lo?

Foi útil?

Solução

Por que isso?

Excelente pergunta. Apenas passou meia hora tentando descobrir o porquê, sem sucesso. A solução da Marcgg não parece trabalho, seja, o deslocamento ainda está lá. Google aparece nada. Isso só parece acontecer no Windows, não apenas nos navegadores que você menciona, mas também no Opera 9 e IE6. não no Firefox 2.0 embora. Intrigante.

Como posso corrigi-lo?

A única solução que tem funcionado tão longe para mim é esta: 

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

i., Especificando Courier em vez de monospace. Isso torna consistente em todos os navegadores que eu testei (IE6, Opera 9, FF 2.0 em Windows 2000; Opera 10, 3 FF, e Konqueror no Ubuntu). Quanto ao porquê, eu ainda não tenho idéia.

Outras dicas

É apenas um efeito óptico. Pegue uma captura de tela e zoom:. Você verá a linha de base de texto não muda em nada

Deve fixar-se se você escolher um contraste de cor diferente.

Atualização

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

O problema é a fonte "Courier New", que é a fonte padrão usado meus navegadores maioria das janelas quando "monospace" é solicitada. Para a variante em negrito, a linha de base está em um 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>

Com este código, você pode ver que o texto do meio é deslocada para cima (= diferente baseline offset), mas a cor de fundo está agora alinhado corretamente.

A solução é pedido "Courier", como uma fonte e para evitar "Courier New".

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top