Свойства шрифта в CSS

font-size

Мы уже рассмотрели единицы размера в CSS, которые применяются для задания размера шрифта, среди прочего.

p { font-size: 16px; }

Имейте в виду, что установка размера шрифта 16px не делает каждую букву высотой 16px. Фактический размер каждой буквы зависит от используемого font-family.

font-style

Это свойство может сделать ваш текст курсивным:

h2 { font-style: italic; }

Значение по умолчанию — font-style: normal.

Другое возможное значение oblique никогда не используется.

font-weight

Это свойство может сделать ваш текст жирным:

h2 { font-weight: bold; }

Значение по умолчанию — font-weight: normal.

В зависимости от используемого font-family, существует целый ряд насыщенности шрифта, доступных от 100 до 900:

font-weight: 100; /* Тонкий */
font-weight: 200; /* Сверхлёгкий */
font-weight: 300; /* Лёгкий */
font-weight: 400; /* Такой же, как font-weight: normal; */
font-weight: 500; /* Средний */
font-weight: 600; /* Полужирный */
font-weight: 700; /* Такой же, как font-weight: bold; */
font-weight: 800; /* Сверхжирный */
font-weight: 900; /* Ультражирный */

Очень немногие шрифты предлагают все девять насыщенностей. Шрифт Exo является одним из них. Вы найдёте в основном 400 (нормальный) и 700 (жирный), а иногда 300 (лёгкий) и 500 (средний).

font-variant

Это свойство превратит ваш текст в капитель:

h2 { font-variant: small-caps; }

Значение по умолчанию — font-variant: normal.

Это не широко используемое свойство.

Перейти к заданиям

Автор и редакторы

Автор: Джереми Томас
Последнее изменение: 13.08.2017
Редакторы: Влад Мержевич