Жирная текстовая строка-высота выше обычной строки строки
Должно быть, что-то базовое, я здесь отсутствует. Я думал, что font-weight: bold не должен изменять, сколько вертикального пространства занимает текст. Особенно, если высота линии установлена выше, чем размер шрифта.
http://jsfiddle.net/Arkkimaagi/7xAyy/
На моем Chrome OSX эти три высоты текста не совпадают. Второй с font-weight: жирным шрифтом на 1px выше, чем остальные. Третий div - всего лишь пример исправления проблемы (плохо)
Я пытаюсь установить высоту строки на что-то конкретное (18px) здесь, чтобы иметь "вертикальный ритм"
Мой вопрос: как я могу получить полужирный и обычный текст с одинаковой высотой строки, как в примере?
[править:]
вот что я вижу на своем mac
![Example of the problem on my osx]()
Кроме того, вот что я называю "вертикальным ритмом": 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", проблема была решена.