なぜ大胆monofaceは、Windows上で縦方向にシフトしていますか？

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

質問

Windows上のFirefox 3.6、IE7とOpera 10では、このHTMLは奇妙な振る舞いを持っています：

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

中央の太いスパンは、1つの画素分シフトダウンされます。それは他のフォントのために発生しません。

それはなぜですか？どのように私はそれを修正することができますか？

役に立ちましたか？

解決

  

それはなぜですか？

優秀な質問です。ただ、無駄に、なぜを把握しようとしている時間半を過ごしました。 Marcggのソリューションは、オフセットまだそこにある、のいずれか、動作するようには思えません。 Googleは何をターンアップしません。これは、あなたが言及ブラウザではなく、オペラ座9とIE6にだけでなく、Windows上で起こるようです。 のないのもののFirefoxの2.0インチ不可解ます。

  

私はそれを解決することができますか？

私のためにこれまで働いている唯一の解決策はこれです：

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

すなわち。、代わりにモノスペースの宅配便を指定します。 （; Ubuntuの下オペラ10、FF 3、およびKonquerorのWindows 2000でIE6、Opera 9の、FF 2.0）これは私がテストしたすべてのブラウザで一貫してレンダリングします。理由としては、私はまだわかりません。

他のヒント

それはちょうど光学効果です。スクリーンショットをつかんで、ズームイン：あなたは、テキストベースラインが全く変わりません表示されます。

。

あなたは別の色のコントラストを選択した場合、それは自分自身を修正する必要があります。

更新

http://img690.imageshack.us/img690/421/opticaleffect .PNGする

問題は、フォント「モノスペース」が要求されたときに、デフォルトのフォントが私のほとんどのWindowsのブラウザを使用している「クーリエ新」です。

：太字の変異体について、ベースラインは、異なるオフセットであります 
<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>

このコードを使用すると、中央のテキストがシフトアップされる（=異なるベースラインがオフセット）が、背景色が正しく配置されていることがわかります。

ソリューションは、フォントとして「宅配便」を要求すると、「宅配便新」を避けるためです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top