Полужирная текстовая строка-высота выше обычной строки строки-высоты

18

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

Ссылка

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

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

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

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

Кроме того, вот что я называю «вертикальным ритмом»: Ссылка  - базовая сетка более заметна в примере: Ссылка

    
задан Mikko Tapionlinna 04.12.2011 в 17:38
источник
  • Невозможно воспроизвести на Firefox в Windows. Теоретически вес шрифта не должен менять высоту строки. Что вы имеете в виду с «вертикальным ритмом»? Что именно ты пытаешься сделать? Установка высоты линии, как правило, никогда не является лучшим решением ни для чего. –  Viruzzo 04.12.2011 в 17:44
  • Вы можете попробовать использовать дополнение вместо строки. Вы также можете захотеть вставить изображение для тех, у кого нет OSX. –  My Head Hurts 04.12.2011 в 17:47
  • Хорошо, я попытался быть более ясным. Я добавил изображение, показывающее, что я вижу, и пару ссылок, которые объясняют вертикальный ритм или базовую сетку. Сетка - вот что я пытаюсь сделать здесь. Этот пример - лишь малая часть того, с чем у меня были проблемы. –  Mikko Tapionlinna 04.12.2011 в 18:04
  • ybakos, позволяет не запускать «html / css - это не язык программирования» - здесь. Я пометил вопрос html и css. –  Mikko Tapionlinna 04.12.2011 в 18:07
  • Микко, похоже, это ошибка браузера при отображении шрифтов. Если вы играете немного с разными размерами шрифта / строками, вы увидите, что поведение немного меняется. Попробуйте, например, font-size: 14px и line-height: 20px. Здесь нет проблем. Я думаю, что браузер имеет проблемы с некоторой математикой, когда шрифт выделен жирным шрифтом. –  Beatriz Oliveira 05.12.2011 в 11:07
Показать остальные комментарии

5 ответов

4

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

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

    
ответ дан hooleyhoop 04.12.2011 в 17:57
  • Странно, однако, поскольку высота строки была явно задана в px, что должно вызывать ее одинаковую высоту независимо от фактического размера шрифта. высота строки: 18px; должен быть таким же, независимо от того, размер шрифта 1px или 100px. –  Nate B 04.12.2011 в 18:03
  • Спасибо Нейту Б, вот что я тоже думал. 18px - 18px, правильно? –  Mikko Tapionlinna 04.12.2011 в 18:08
  • Да, я бы ожидал различий между браузерами / платформами, но мне все же кажется странным, что он выглядит по-разному прямо рядом друг с другом. –  Nate B 04.12.2011 в 18:13
  • рассмотрите два блока текста: один маленький (10px) и один большой (21px), но оба с одинаковой высотой строки (21px). Хотя пространство между базовыми линиями составляет 21px в обоих случаях, базовые линии для двух блоков не совпадают или находятся в одной и той же сетке. –  hooleyhoop 04.12.2011 в 18:31
  • Я уверен, что вам все равно - я имею в виду, что установка высоты линии до 18px не делает ее 18px (или несколько) высокой. То, что вы пытаетесь сделать, невозможно –  hooleyhoop 04.12.2011 в 19:26
Показать остальные комментарии
7

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

strong { vertical-align: top; }

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

span { line-height: 1em; }
    
ответ дан DaveC 01.09.2013 в 16:16
1

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

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

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

    
ответ дан Petr Cibulka 10.01.2014 в 00:36
1

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

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

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

strong, em { line-height: 1em }
    
ответ дан Jon 19.12.2014 в 11:10
  • Я не хочу устанавливать высоту строки в 1м, так как я хочу, чтобы высота линии была точно 18 пикселей, как я сказал в моем вопросе. Если бы у меня было несколько строк выделенных жирным шрифтом, выравнивание было бы отключено с 1em = 13px строчными буквами. Пример кода - это только пример кода. Изменение кода для использования сильного, а не диапазона не помогает здесь, поскольку я просто хотел продемонстрировать проблемы с линией. –  Mikko Tapionlinna 29.12.2014 в 18:44
  • Я думаю, вы пропустили мой ответ. Высота линии равна 18px. Использование 1em для дочерних элементов означает наследование вычисленной высоты 18px, а не thaqn, применяющих их собственное значение. не предлагал изменить высоту строки div, но указав 1em для жирного содержимого, чтобы он наследовал строку-высоту div. –  Jon 05.01.2015 в 17:30
  • (Исправление - у меня не хватило времени, чтобы отредактировать мой ответ) Использование 1em в дочерних элементах означает, что они наследуют длину строки div 18px, а не применяют их собственное значение. Я протестировал это в OS X Chrome, и это отличное решение. Разве вы не думаете, что спрашиваете: «Есть ли лучший способ справиться с этим», а затем лишить кого-то предложения о том, что один из них немного груб? –  Jon 05.01.2015 в 17:38
  • Это исправило это для меня, спасибо. В моем случае проблема возникла только тогда, когда я установил шрифт весом 900 на жирный шрифт. Но это фиксировало это независимо. –  felwithe 12.11.2017 в 17:38
0

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

    
ответ дан Quotes 30.12.2017 в 13:16