Высота шрифта: CSS3 | Высота шрифта

Свойства font-size и line-height

`;document.write(t),showTopNotification()}}

• ARعربي
• ENEnglish
• ESEspañol
• FAفارسی
• FRFrançais
• IDIndonesia

• ITItaliano
• JA日本語
• KO한국어
• RUРусский
• TRTürkçe
• UKУкраїнська

• ZH简体中文

Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на свой язык

КупитьEPUB/PDF

14 октября 2020 г.

Здесь мы рассмотрим, как соотносятся размеры шрифта и строки, и как их правильно задавать.

• font-size – размер шрифта, в частности, определяющий высоту букв.
• line-height – высота строки.

Для наглядности посмотрим пример HTML, в котором шрифт и размер строки одинаковы:

<style>
body {
    font-size: 30px;
    font-family: monospace;
    line-height: 30px;
  }
</style>
<div>Ёрш р</div>
<div>Ёрш Ё</div>

Размер шрифта font-size – это абстрактное значение, которое привязано к шрифту, и даётся в типографских целях.

Обычно оно равно расстоянию от самой верхней границы букв до самой нижней, исключая «нижние хвосты» букв, таких как p, g. Как видно из примера выше, при размере строки, равном font-size, строка не будет размером точно «под букву».

В зависимости от шрифта, «хвосты» букв при этом могут вылезать, правые буквы Ё и р в примере выше пересекаются как раз поэтому.

В некоторых особо размашистых шрифтах «хвосты букв» могут быть размером с саму букву, а то и больше. Но это, всё же исключение.

Обычно размер строки делают чуть больше, чем шрифт.

По умолчанию в браузерах используется специальное значение line-height:normal.

Оно означает, что браузер может принимать решение о размере строки самостоятельно. Как правило, оно будет в диапазоне

1.1 - 1.25, но стандарт не гарантирует этого, он говорит лишь, что оно должно быть «разумным» (дословно – англ. reasonable).

Значение line-height можно указать при помощи px или em, но гораздо лучше – задать его числом.

Значение-число интерпретируется как множитель относительно размера шрифта. Например, значение с множителем line-height: 2 при font-size: 16px будет аналогично line-height: 32px (=16px*2).

Однако, между множителем и точным значением есть одна существенная разница.

• Значение, заданное множителем, наследуется и применяется в каждом элементе относительно его размера шрифта.

  То есть, line-height: 2 означает, что высота строки будет равна удвоенному размеру шрифта, не важно какой шрифт.

• Значение, заданное в единицах измерения, запоминается и наследуется «как есть».

  Это означает, что line-height: 32px будет всегда жёстко задавать высоту строки, даже если шрифт во вложенных элементах станет больше или меньше текущего.

Давайте посмотрим, как это выглядит, на примерах:

Множитель, line-height:1.25

<div>
  стандартная строка
  <div>
    шрифт в 2 раза больше<br>
    шрифт в 2 раза больше
  </div>
</div>

Конкретное значение, line-height:1.25em

<div>
  стандартная строка
  <div>
    шрифт в 2 раза больше<br>
    шрифт в 2 раза больше
  </div>
</div>

Какой вариант выглядит лучше? Наверно, первый. В нём размер строки более-менее соответствует шрифту, поскольку задан через множитель.

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

Установить font-size и line-height можно одновременно.

Соответствующий синтаксис выглядит так:

font: 20px/1.5 Arial,sans-serif;

При этом нужно обязательно указать сам шрифт, например Arial,sans-serif. Укороченный вариант font: 20px/1.5 работать не будет.

Дополнительно можно задать и свойства font-style, font-weight:

font: italic bold 20px/1.5 Arial,sans-serif;

line-height

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

font-size

Размер шрифта. Если сделать блок такой же высоты, как шрифт, то хвосты букв будут вылезать из-под него.

font: 125%/1.5 FontFamily

Даёт возможность одновременно задать размер, высоту строки и, собственно, сам шрифт.

Предыдущий урокСледующий урок

Поделиться

Карта учебника

• © 2007—2022  Илья Кантор
• о проекте
• связаться с нами
• пользовательское соглашение
• политика конфиденциальности

Таблица П1. Размер шрифта \ КонсультантПлюс

Таблица П1

(справочная)

РАЗМЕР ШРИФТА

┌──────────────────────────┬─────────────────────────────────────┐

│ Кегль шрифта, пункты │ Высота прописной буквы, мм │

├──────────────────────────┼─────────────────────────────────────┤

│ 5 │ 1,25 │

├──────────────────────────┼─────────────────────────────────────┤

│ 6 │ 1,50 │

├──────────────────────────┼─────────────────────────────────────┤

│ 7 │ 1,75 │

├──────────────────────────┼─────────────────────────────────────┤

│ 8 │ 2,00 │

├──────────────────────────┼─────────────────────────────────────┤

│ 9 │ 2,25 │

├──────────────────────────┼─────────────────────────────────────┤

│ 10 │ 2,50 │

├──────────────────────────┼─────────────────────────────────────┤

│ 12 │ 3,00 │

├──────────────────────────┼─────────────────────────────────────┤

│ 14 │ 3,50 │

├──────────────────────────┼─────────────────────────────────────┤

│ 16 │ 4,00 │

├──────────────────────────┼─────────────────────────────────────┤

│ 18 │ 4,45 │

├──────────────────────────┼─────────────────────────────────────┤

│ 20 │ 4,95 │

├──────────────────────────┼─────────────────────────────────────┤

│ 36 │ 8,95 │

└──────────────────────────┴─────────────────────────────────────┘

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

Определение кегля шрифта издательским прозрачным шаблоном проводят по прописным буквам (Н, П, К) в контролируемой статье наложением шаблона до совмещения контролируемой буквы по высоте с контрольной буквой на шаблоне либо с границами контрольного “окошка”.

Результат считают отрицательным, если значения 4 из 10 полученных измерений кегля меньше минимально допустимых.

3. Плотность набора определяют делением количества знаков (включая апроши – междусловные пробелы) во фрагменте текста на его площадь в кв. см.

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

4. Начертание и группу шрифта определяют по ГОСТу 3489.1-71 в 10 характерных статьях. Результат по каждому параметру считают отрицательным, если в 4 из 10 контролируемых статей выявлено несоответствие установленной норме.

5. Длину строки текста в издании измеряют линейкой по ГОСТу 427-75 в мм с точностью до 1 мм или издательским прозрачным шаблоном в мм или квадратах.

Для определения длины строки измеряют одну полноформатную строку в каждой из 10 контролируемых статей.

Результат считают отрицательным, если значения 4 из 10 полученных измерений длины строки не соответствуют требованиям.

6. Расстояние между колонками измеряют линейкой или издательским прозрачным шаблоном в мм с точностью до 1 мм.

Измерения проводят в 10 контролируемых статьях.

Результат считают отрицательным, если 4 из 10 полученных значений меньше установленной нормы.

7. Увеличение интерлиньяжа замеряют издательским прозрачным шаблоном.

Для определения увеличения интерлиньяжа замеряют с помощью контрольного “окошка” расстояние между нижними выносными элементами верхней строки и линией шрифта нижней строки в пунктах (К1) и вычитают значение кегля шрифта в пунктах (К2) в соответствии с рис. 1 <*>.

——————————–

<*> Не приводится.

Результат считают отрицательным, если 4 из 10 полученных значений меньше нормы.

8. Оптическую плотность фона измеряют денситометром отражения за фильтром видности в 5 местах плашки (изображения).

Результат считают отрицательным по контролируемой статье, если значения 3 из 5 измерений не соответствуют максимально допустимой оптической плотности по табл. 2 и минимально допустимой плотности по п. 4.8.

Результат считают отрицательным, если в 4 из 10 контролируемых статей выявлено несоответствие.

9. Результаты оценки рекомендуется оформлять по формам 1 и 2.

10. Заключение по результатам оценки рекомендуется оформлять протоколом по форме 3.

css – размер шрифта, высота строки и фактическая высота

Введение

Хороший вопрос,

Большинство этих вещей я узнаю на собственном опыте.

В этом случае для высоты DIV установлено значение auto. Он определит высоту своего собственного содержимого и оценит его новую высоту оттуда.

Очевидно, что DIV учитывает только высоту строки файла . Вероятно, это связано с разнообразием шрифтов.

Line-height дает нам необходимую адаптируемость для различных типов шрифтов.

In Short

размер шрифта

Размер шрифта изменяет только сам шрифт, а не элементы div вокруг него

line-height

Высота строки и изменит элементы div вокруг него

Подождите секунду…

Если у нас есть что-то вроде этого:

 div {
  фон: зеленый;
  поле сверху: 50 пикселей;
}
.тест-один {
  размер шрифта: 20px
}
.тест-два {
  размер шрифта: 40px
} 

 <дел>
   проверить один