Мой вопрос в том, какое поведение является правильным.
Все они верны, потому что у нас нет одинакового шрифта по умолчанию во всех браузерах, и он также различается в зависимости от ОС.
Можно ли использовать определенный символизменить высоту строки (я думал, что она должна зависеть только от шрифта)?
Символ не меняется line-height.Чтобы быть более точным, line-height - это свойство, которое может быть изменено только путем установки line-height, но вы, вероятно, путаете строковое поле, определяемое line-height, и только один символ не может его изменить.
Разве высота строки: 1 означает, что она может вписаться точно в любой текст?
Не обязательно, line-height:1 означает, что поле строки будет равно 1xfont-size 1 но предназначен ли шрифт для включения всех символов внутри этого пространства?Вероятно, большинство из них подойдет, но мы не знаем.
В принципе, у вас есть две вещи для рассмотрения. область содержимого , которая определяется свойствами шрифта, и строка line , которая определяется высотой строки.У нас нет контроля над первым и мы можем контролировать только второе.
Вот базовый пример для иллюстрации:
span {
background:red;
color:#fff;
font-size:20px;
font-family:monospace;
}
body {
margin:10px 0;
border-top:1px solid;
border-bottom:1px solid;
animation:change 2s linear infinite alternate;
}
@keyframes change {
from {
line-height:0.2
}
to {
line-height:2
}
}
<span >
blah_blah
</span>
Красная область - это наша область содержимого, ее высота определяется свойствами шрифта, и если вы осмотрите элемент, то увидите, что он имеет высоту, равную 23px (не 20px как font-size) и границы определяют наш линейный блок, который мы контролируем, используя высоту строки.
Так что, если line-height равен 1, у нас будет линейный блокравно 20px, что недостаточно для содержания 23px области содержимого, поэтому оно будет усечено, и мы, возможно, можем скрыть некоторые символы (или их часть), что логично:
span {
background: red;
color: #fff;
font-size: 20px;
font-family: monospace;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<span>
blah_blah ÂÄ j p
</span>
другой font-size удалит подчеркивание в Firefox:
span {
background: red;
color: #fff;
font-size: 26px;
font-family: monospace;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<span>
blah_blah ÂÄ j p
</span>
Еще один пример со шрифтом Google, где результатом должен быть тот же кросс-браузер.Подчеркивание является видимым, но не ^ / ¨
span {
background: red;
color: #fff;
font-size: 26px;
font-family: 'Gugi', cursive;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>
Другой пример, где подчеркивание не видно:
span {
background: red;
color: #fff;
font-size: 27px;
font-family: 'PT Sans', sans-serif;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>
Вы можете ясно видеть, что каждый раз, когда мы используем другой шрифт, мы имеем разное переполнениеподтверждает, что это связано со шрифтом.Мы не можем контролировать его, если не знаем, как устроен шрифт.
Смежные вопросы:
Понимание спецификации CSS2.1 относительно высоты на встроенных блоках
Почему между линейными блоками есть пробел, а не из-за полусведения?
Проблема высоты строки с элементами inline-block
Вот хорошая статья, чтобы получить более точные данные и расчеты: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
Цитата из этой статьи:
Становится очевидным, что установка line-height: 1 является плохой практикой . Напоминаю, что значения без единиц измерения относятся к размеру шрифта, а не к относительной области содержимого , и работа с виртуальной областью, меньшей области содержимого, является источником многих наших проблем.
1: я рассмотрел упрощенное объяснение, но в действительности вычисление линейного блока относится не только к свойству line-height. Проверьте ниже ссылки для более точного и полного объяснения