Почему полужирный шрифт смещается по вертикали в Windows?
Вопрос
В 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>
Жирный диапазон посередине сдвинут вниз на один пиксель.С другими шрифтами этого не происходит.
Почему это?Как я могу это исправить?
Решение
Почему это?
Отличный вопрос.Полтора часа пытался понять причину, но безрезультатно.Решение Маркга, похоже, тоже не работает, смещение все еще существует.Гугл ничего не выдает.Кажется, это происходит только в Windows, не только в упомянутых вами браузерах, но и в Opera 9 и IE6. Нет хотя в Firefox 2.0.Загадочно.
Как я могу это исправить?
Единственное решение, которое до сих пор работало для меня, это:
span {
font-family: Courier; background-color: green;
}
span.b {
font-weight: bold;
}
То есть, указав Courier вместо моноширинного.Это отображается последовательно во всех протестированных мной браузерах (IE6, Opera 9, FF 2.0 под Windows 2000;Opera 10, FF 3 и Konqueror под Ubuntu).Почему, я до сих пор понятия не имею.
Другие советы
Это просто оптический эффект.Сделайте скриншот и увеличьте масштаб:вы увидите, что базовая линия текста вообще не меняется.
Это должно исправиться, если вы выберете другой цветовой контраст.
Обновлять
альтернативный текст http://img690.imageshack.us/img690/421/opticaleffect.png
Проблема в шрифте «Courier New», который является шрифтом по умолчанию, который используется в большинстве браузеров 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>
С помощью этого кода вы можете видеть, что средний текст сдвинут вверх (= другое смещение базовой линии), но цвет фона теперь выровнен правильно.
Решение состоит в том, чтобы запросить «Courier» в качестве шрифта и избегать «Courier New».