Почему жирный монофейс смещается вертикально в Windows? - PullRequest
Новая
       27

Почему жирный монофейс смещается вертикально в Windows?

3 голосов
/ 12 марта 2010

В Firefox 3.6, IE7 и Opera 10 в Windows этот 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>

Жирный интервал в середине смещен вниз на один пиксель. Это не происходит с другими шрифтами.

Почему это? Как я могу это исправить?

Ответы [ 3 ]

1 голос
/ 12 марта 2010

Это просто оптический эффект. Возьмите скриншот и увеличьте масштаб: вы увидите, что базовая линия текста не меняется вообще.

Это должно исправить себя, если вы выберете другой цветовой контраст.

Обновление

альтернативный текст http://img690.imageshack.us/img690/421/opticaleffect.png

1 голос
/ 12 марта 2010

Почему это?

Отличный вопрос. Просто потратил полчаса, пытаясь понять, почему, но безрезультатно. Решение Маркга, похоже, тоже не работает, смещение все еще там. Гугл ничего не получается. Похоже, это происходит только в Windows, не только в упомянутых вами браузерах, но и в Opera 9 и IE6. Не в Firefox 2.0. Непонятные.

Как я могу это исправить?

Единственное решение, которое до сих пор работало для меня, это: 

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

Т.е., указав Courier вместо monospace. Это отображается последовательно во всех протестированных мною браузерах (IE6, Opera 9, FF 2.0 под Windows 2000; Opera 10, FF 3 и Konqueror под Ubuntu). Что касается того, почему, я до сих пор понятия не имею.

0 голосов
/ 12 марта 2010

Проблема в шрифте «Courier New», который является шрифтом по умолчанию, который используется в большинстве моих браузеров Windows при запросе «monospace». Для жирного варианта базовая линия имеет другое смещение: 

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

С этим кодом вы можете видеть, что средний текст смещен вверх (= другое смещение базовой линии), но цвет фона теперь выровнен правильно.

Решение состоит в том, чтобы запросить «Courier» в качестве шрифта и избежать «Courier New».

...