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

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

Вопрос

В 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».

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top