Жирная текстовая строка-высота выше обычной строки строки

Должно быть, что-то базовое, я здесь отсутствует. Я думал, что font-weight: bold не должен изменять, сколько вертикального пространства занимает текст. Особенно, если высота линии установлена выше, чем размер шрифта.

http://jsfiddle.net/Arkkimaagi/7xAyy/

На моем Chrome OSX эти три высоты текста не совпадают. Второй с font-weight: жирным шрифтом на 1px выше, чем остальные. Третий div - всего лишь пример исправления проблемы (плохо)

Я пытаюсь установить высоту строки на что-то конкретное (18px) здесь, чтобы иметь "вертикальный ритм"

Мой вопрос: как я могу получить полужирный и обычный текст с одинаковой высотой строки, как в примере?

[править:] вот что я вижу на своем mac

Кроме того, вот что я называю "вертикальным ритмом": http://www.alistapart.com/articles/settingtypeontheweb - базовая сетка более заметна в примере: http://www.alistapart.com/d/settingtypeontheweb/example_grid.html

Ответы

Ответ 1

Это зависит от шрифтов, которые вы используете. Ничто в том, что отображение текста в OSX или Chrome не гарантирует, что два разных шрифта (и Helvetica-neue и Helvetica-neue-bold - это два разных шрифта) будут иметь одинаковое вертикальное пространство даже при том же размере шрифта и высоте строки.

Даже если это слишком много, чтобы спросить, вы можете подумать, что два разных шрифта из одного семейства могут быть согласованными, и обычно они есть, но, к сожалению, два шрифта, которые вы выбрали, не являются.

Ответ 2

Иногда добавление верхнего вертикального выравнивания решает это (в зависимости от размера шрифта/семейства).

strong { vertical-align: top; }

В примере вашего скрипта, поскольку вы установили высоту строки в контейнере (div), вы можете просто добавить следующее:

span { line-height: 1em; }

Ответ 3

Я столкнулся с очень похожей проблемой с шрифтом Chivo: http://www.fontsquirrel.com/fonts/chivo. Прямо сейчас я использую самый уродливый хак (работает с текущими Firefox и Chrome, IE еще не проверен):

strong { vertical-align: top; position: relative; top: -1px; }

Я стараюсь не сдаваться на Chivo довольно сложно, как вы видите...

Ответ 4

Установка абсолютной высоты строки как на контейнере, так и на полужирный текст или выделение полужирным шрифтом высоты строки 1em (как указано выше в DaveC), оба фиксируют это, например. из jsfiddle вам просто нужно добавить line-height: 1em

.bolded span {
  font-weight:bold;
  line-height: 1em;
}

Или почему бы не следовать стандартам HTML и использовать правильные теги вместо выделенных жирным шрифтом? Например.

strong, em { line-height: 1em }

Ответ 5

Я думаю, что это проблема с шрифтом. Я нашел разные высоты линий для курсивного варианта Nunito (Веб-шрифт Google). Когда я переключился на переработанную версию этого шрифта под названием "Nunito Sans", проблема была решена.