127 lines
6.6 KiB
Markdown
127 lines
6.6 KiB
Markdown
# Свойства "font-size" и "line-height"
|
||
|
||
Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.
|
||
|
||
## font-size и line-height
|
||
<ul>
|
||
<li>`font-size` -- *размер шрифта*, в частности, определяющий высоту букв.</li>
|
||
<li>`line-height` -- *высота строки*.</li>
|
||
</ul>
|
||
|
||
Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:
|
||
|
||
```html
|
||
<!--+ autorun height=100 no-beautify -->
|
||
<style>
|
||
body {
|
||
*!*
|
||
font-size: 30px;
|
||
font-family: monospace;
|
||
line-height: 30px;
|
||
*/!*
|
||
}
|
||
</style>
|
||
|
||
<div style="outline: 1px dotted red">Ёрш р</div>
|
||
<div style="outline: 1px dotted red">Ёрш Ё</div>
|
||
```
|
||
|
||
Размер шрифта `font-size` -- это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.
|
||
|
||
Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая "нижние хвосты" букв, таких как `р`, `g`. Как видно из примера выше, при размере строки, равном `font-size`, строка не будет размером точно "под букву".
|
||
|
||
В зависимости от шрифта, "хвосты" букв при этом могут вылезать, правые буквы `Ё` и `р` в примере выше пересекаются как раз поэтому.
|
||
|
||
В некоторых особо размашистых шрифтах "хвосты букв" могут быть размером с саму букву, а то и больше больше. Но это, всё же исключение.
|
||
|
||
Обычно размер строки делают чуть больше, чем шрифт.
|
||
|
||
**По умолчанию в браузерах используется специальное значение `line-height:normal`.**
|
||
|
||
Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне `1.1 - 1.25`, но стандарт не гарантирует этого, он говорит лишь, что оно должно быть "разумным" (дословно -- англ. reasonable).
|
||
|
||
## Множитель для line-height
|
||
|
||
Значение `line-height` можно указать при помощи `px` или `em`, но гораздо лучше -- задать его числом.
|
||
|
||
Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем `line-height: 2` при `font-size: 16px` будет аналогично `line-height: 32px (=16px*2)`.
|
||
|
||
Однако, между множителем и точным значением есть одна существенная разница.
|
||
|
||
<ul>
|
||
<li>**Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.**
|
||
|
||
То есть, при `line-height: 2` означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.
|
||
</li>
|
||
<li>**Значение, заданное в единицах измерения, запоминается и наследуется "как есть".**
|
||
|
||
Это означает, что `line-height: 32px` будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.</li>
|
||
</ul>
|
||
|
||
Давайте посмотрим, как это выглядит, на примерах:
|
||
|
||
<dl>
|
||
<dt>Множитель, `line-height:1.25`</dt>
|
||
<dd>
|
||
|
||
```html
|
||
<!--+ autorun -->
|
||
<div style="*!*line-height: 1.25*/!*">
|
||
стандартная строка
|
||
<div style="font-size:2em">
|
||
шрифт в 2 раза больше<br>
|
||
шрифт в 2 раза больше
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
</dd>
|
||
<dt>Конкретное значение, `line-height:1.25em`</dt>
|
||
<dd>
|
||
|
||
```html
|
||
<!--+ autorun -->
|
||
<div style="*!*line-height: 1.25em*/!*">
|
||
стандартная строка
|
||
<div style="font-size:2em">
|
||
шрифт в 2 раза больше<br>
|
||
шрифт в 2 раза больше
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
</dd>
|
||
</dl>
|
||
|
||
Какой вариант выглядит лучше? Наверно, первый. В нём размер строки более-менее соответствует шрифту, поскольку задан через множитель.
|
||
|
||
**В обычных ситуациях рекомендуется использовать именно множитель, за исключением особых случаев, когда вы действительно знаете что делаете.**
|
||
|
||
## Синтаксис font: size/height family
|
||
|
||
Установить `font-size` и `line-height` можно одновременно.
|
||
|
||
Соответствующий синтаксис выглядит он так:
|
||
|
||
```css
|
||
font: *!*20px/1.5*/!* Arial,sans-serif;
|
||
```
|
||
|
||
При этом нужно обязательно указать сам шрифт, например `Arial,sans-serif`. Укороченный вариант `font: 20px/1.5` работать не будет.
|
||
|
||
Дополнительно можно задать и свойства `font-style`, `font-weight`:
|
||
|
||
```css
|
||
font: *!*italic bold*/!* 20px/1.5 Arial,sans-serif;
|
||
```
|
||
|
||
## Итого
|
||
|
||
<dl>
|
||
<dt>`line-height`</dt>
|
||
<dd>Размер строки, обычно он больше размера шрифта. При установке множителем расчитывается каждый раз относительно текущего шрифта, при установке в единицах измерения -- фиксируется.</dd>
|
||
<dt>`font-size`</dt>
|
||
<dd>Размер шрифта. Если сделать блок такой же высоты, как шрифт, то хвосты букв будут вылезать из-под него.</dd>
|
||
<dt>`font: 125%/1.5 FontFamily`</dt>
|
||
<dd>Даёт возможность одновременно задать размер, высоту строки и, собственно, сам шрифт.</dd>
|
||
</dl>
|