Как правильно установить css интерлиньяж

У меня есть ситуация, пытаясь понять, как правильно использовать и установить, css leadingкогда у нас есть что-то вроде этого:

Даже если line-heightэто одно и то же, первые 2 строки выглядят довольно далеко друг от друга. С другой стороны, строки 2 и 3 выглядят ближе. Сказав это, можно ли использовать разные пользовательские line-heightзначения, чтобы создать одинаковое визуальное пространство между строками? Благодарю.

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

Ответы (3)

Есть разные способы ответить на это.

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

Технически это зависит от контекста вашей разметки. Если это один абзац, то нет, нет реального способа присвоить каждой строке собственную высоту строки внутри абзаца, потому что нет способа предсказать, какой текст будет содержаться в одной строке. Перенос строки может варьироваться от системы к системе/браузеру к браузеру/от пользователя к пользователю. Причина в том, что у вас нет абсолютного контроля над типом человека в браузере. Думайте о веб-дизайне как о «предложении» макета, но не о том, что он диктует.

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

Учитывая все это, обычно это будет довольно непрактично.

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

Конечно, это вполне приемлемо. Нет правила, говорящего, что вы не можете.

При этом две вещи, которые вы должны учитывать больше всего, это

  1. Отзывчивость. Если размер экрана или контейнера слишком мал, некоторый текст может быть перенесен на следующую строку, что испортит весь стиль.

  2. Изменение текста позже. Если позже текст будет изменен на что-то новое, то особый стиль, примененный к этому набору букв, может испортить внешний вид нового текста. Это может быть слишком близко или слишком далеко друг от друга и т. д.

Вопрос должен быть: стоит ли? Это зависит от ситуации, но по моему опыту часто бывает, что нет .

Спасибо за быстрый ответ, в моем случае текст останется прежним навсегда :) речь идет об абзаце, который навсегда останется на странице. Говоря об отзывчивости, страница не предназначена для экранов мобильных устройств/планшетов.
@typo_78 если это абзац, то нет, вы не можете присвоить каждой строке отдельную высоту строки, так как вы не можете предсказать перенос строки.
@ DA01 Я думаю, что он допускает обертки внутри, то есть каждая строка имеет свой собственный элемент, окружающий ее. Могут быть отношения p > span
Это будет короткий абзац (несколько строк) размером шрифта около 35-40 пикселей, как в показанном примере, помещенный в столбец. Каждая строка будет создана отдельно <p> ... </p >с разными значениями высоты строки. . Перенос строк может произойти, если размер страницы изменен до небольших размеров, а для столбца установлен параметр адаптивности, верно? но это не мой случай
Теги @ZachSaucier технически pне могут содержать дочерние блоки. Но в любом случае проблема не в разметке, а в том, что никто не имеет реального контроля над шрифтами в браузере конечного пользователя. Системные, пользовательские и браузерные настройки могут изменить ситуацию настолько, что вызовет хаос при ручном переносе строк. Если речь идет о заголовке, то да, но если речь идет о абзацах текста, это непрактичное решение.
@typo_78, если каждая строка на самом деле является абзацем, то это может сработать, хотя я бы, вероятно, просто придерживался настроек полей и отступов для каждой pвместо этого.
И чтобы было ясно, перенос строк может произойти, просто просмотрев страницу в двух разных системах. Не у всех может быть установлен один и тот же шрифт. Не у всех будут одинаковые настройки размера шрифта по умолчанию. Многие люди меняют настройки размера шрифта и т. д.
понял :) в моем случае это заголовок, а шрифт загружен на сервер, сайт будет использовать этот шрифт, поэтому я думаю, что все увидят это сообщение в той же форме, верно?
@typo_78 Typo_78 да, это наверняка более безопасная ставка. Большинство людей увидят шрифт (если они не отключили эту опцию в браузере для загрузки шрифтов), но люди все равно могут изменить размер. Тем не менее, как заголовок, у вас, вероятно, есть «пространство для маневра», поэтому, пока вы даете ему это место, все должно быть в порядке.
что касается настроек размера шрифта по умолчанию, поэтому я буду использовать стили абзаца для определения набора свойств, включая ( font-family, font-style, font-weight, font-size, text-align, line-height, letter-spacing...)

Вы можете отделить каждую строку как отдельную строку, а затем манипулировать строками по своему усмотрению. Это все еще может вызвать проблемы, но вы можете перемещать строки по своему усмотрению.

Как правильно установить css интерлиньяж
СпросиСетьПолитика конфиденциальности1y, 0v