Интересно, какие промежутки между строками
Ниже приведены два примера. Разница только в семействе шрифтов между примерами, но во втором есть промежутки между строками. Почему во втором примере между строками видны промежутки?
HTML:
<span>This is a long text. This is a long text. This is a long text. This is a long text.</span>
CSS:
span{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 100px;
background-color: red;
}
CSS:
span{
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
background-color: red;
}
Ответы 1
По какой-то причине шрифт Arial имеет высоту строки 1,16. Вы можете изменить его с помощью свойства line-height: 1.0; или более высокого значения.
Lucida Sans Unicode выглядит так же, как line-height: 1.23, поэтому я бы сказал, что у каждого шрифта есть собственная высота строки. Также здесь developer.mozilla.org/pl/docs/Web/CSS/line-height говорит, что Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.
Спустя несколько месяцев я обнаружил это, вы правы, у каждого шрифта своя высота, статья длинная, но очень хорошо описывает: iamvdo.me/en/blog/…
Но в чем причина? У каждого шрифта есть собственная высота строки? Или в результате вычислений браузера? Думаю, есть вещи посложнее.