Форматирование текста (font-weight, font-style, font-size, text-indent) в HTML

В этой статье будут рассмотрены способы форматирования текста с помощью различных CSS свойств.

Жирность текста (font-weight)

С первого взгляда свойство font-weight дублирует тег <b>. То есть делает текст жирным. Но не спешите с выводами, потому что это свойство может различать градации жирного. Для этого у него есть несколько значений:

normal - нормальная жирность шрифта (то есть нет жирного)
bold - текст будет выделен жирным
bolder - текст будет жирнее, чем жирность текста у родительского элемента
lighter - текст будет менее жирным, чем текст у родительского элемента

Приведём пример:

Тише, <span style="font-weight: bold;">мыши</span>, кот на крыше.

Получится такой результат:

Тише, мыши, кот на крыше.

Помимо эти названий свойство font-weight может принимать численные значения: 100, 200, 300, 400 и т.д. до 900. Чем больше цифра - тем жирнее текст. Нормальный текст без выделения жирным соответствует цифре 400. Выделенный жирным текст соответствует цифре 700.

Далеко не у всех шрифтов есть весь набор градаций жирного. Обычно используются только два: bold и normal варианты. Поэтому в таких ситуациях какую цифру ни ставь, все равно получишь только 2 варианта жирности. Но через CSS можно подключить шрифты (указать адреса файлов), в которых будет все остальные градации жирности.

Курсив (font-style)

Курсив можно получить с помощью тега <i>. Но ещё и через свойство font-style со значением italic. Приведём пример:

Тише, <span style="font-style: italic;">мыши</span>, кот на крыше.

Получится такой результат:

Тише, мыши, кот на крыше.

Чтобы сделать из курсива нормальный шрифт, используйте "font-style: normal;"

Размер шрифта (font-size)

Через CSS свойство font-size можно задать размер шрифта. Это свойство может принимать несколько единиц измерений. Перечислим их в порядке убывания популярности использования:

px - пикселы,
% - проценты (от размера шрифта родительского элемента)
em - высота шрифта элемента (единица - это сто процентов от размера шрифта родительского элемента),
pt - пункты (по сути пиксели, но в пропорции 12pt = 16px)
текстовые названия размеров: xx-small, x-small, smal, medium, large, x-large, xx-large
ex - высота символа х (единица - это сто процентов),

Приведём пример использования. Постараемся сделать примерно одинаковый размер шрифта, используя все возможные единицы измерений:

Тише, <span style="font-size: 18px;">мыши</span>, кот на крыше.
Тише, <span style="font-size: 130%;">мыши</span>, кот на крыше.
Тише, <span style="font-size: 1.3em;">мыши</span>, кот на крыше.
Тише, <span style="font-size: large;">мыши</span>, кот на крыше.
Тише, <span style="font-size: 14pt;">мыши</span>, кот на крыше.
Тише, <span style="font-size: 2.2ex;">мыши</span>, кот на крыше.

Получится такой результат:

Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.

Красная строка (text-indent)

Наверное, вы уже заметили, что HTML не воспринимает пробелы. То есть если в HTML коде поставить сотню пробелов между словами, а потом открыть этот HTML файл в браузере, то пробелы заменятся на один. Из-за этого и нет возможности сделать красную строку в абзаце. Но на помощь приходит CSS свойство text-indent, которое может сделать этот отступ. Значение этого свойства задаются в пикселях. Приведём пример:

<div style="text-indent: 40px;">
   Тише, мыши, кот на крыше,<br>
   а котята ещё выше.
</div>

В браузере будет показано так:

Тише, мыши, кот на крыше,
а котята ещё выше.