Форматирование текста

Знаете ли вы, что CSS имеет средства форматирования текста не хуже чем у Microsoft Word? Вы можете задать свой шрифт, жирность, начертание, цвет, тень,размер и еще множество параметров, чтобы получить идеально отформатированный текст. Для форматирования текста используется следующий основной набор свойств:

  • font-family
    Задаёт шрифт для элемента. К примеру,font-family: Arial, sans-serif Изменяет шрифт на Arial, а если этого шрифта в системе нет, то берёт любой из установленных шрифтов семейства sans-serif.
  • font-size
    Задаёт кегль для текста (размер шрифта).font-size: 18px Задаёт размер шрифта в 18px. Могут быть использованы относительные значения: "larger" и "smaller", указывающие, что размер должен быть больше или меньше стандартного значения.
  • font-weight
    Устанавливает насыщенность (жирность) шрифта. Значением могут быть числа от 100 до 900 с шагом 100, а также bold, bolder, lighter и normal.
    Примечание: значения должны поддерживаться шрифтом! Если шрифт не поддерживает какие-то значения насыщенности, то вы не сможете задать эти значения и будет выбрано ближайшее поддерживающееся.
  • font-style
    Определяет начертание шрифта. Может быть обычным (normal), курсивным (italic) и наклонным (oblique).
    Наклонное начертание хоть и похоже на курсивное, однако, это разные вещи. Курсивным текст станет только в том случае, если шрифт поддерживает курсивное начертание. Наклонный текст образуется путём программного наклона букв обычного шрифта.
  • font-variant
    Благодаря этому свойству, можно отображать текст капителью. Это означает, что строчные буквы будут отображены как прописные, но уменьшенного размера.
  • letter-spacing
    Определяет интервал между символами. Желательно задавать значения в em. Принимает и отрицательные значения.
  • word-spacing
    Устанавливает интервал между словами (ширина пробела)
  • text-indent
    Устанавливает ширину первой строки абзаца (красной строки)
  • text-transform
    Управляет регистром текста. К примеру, значение uppercase устанавливает все символы текста прописными.
  • text-decoration
    Добавляет подчёркивание (underline), перечёркивание (line-through) или линию над текстом (overline). Кроме того, значение none полностью убирает стандартные подчёркивания у ссылок.
  • text-align
    Выравнивание текста. Доступные значения:center(по центру),justify(по ширине строки),start(по левому краю, для тех языков, где текст идёт слева направо),end(по правому краю, для тех языков, где текст идёт слева направо)
  • text-shadow
    Добавляет тень тексту. К примеру,text-shadow: 1px 2px 3px black, где
    первое значение (1px) — сдвиг по оси x,
    второе значение (2px) — сдвиг по оси y,
    третье значение (3px) — радиус размытия тени,
    четвертое значение (black) — цвет тени.
    Кроме того, таких групп значений может быть сколько угодно. К примеру,text-shadow: 1px 2px 3px black, 0 0 1em red
  • column-count
    Задаёт количество колонок в тексте. Применяется, в основном, для газетной вёрстки.
  • line-height
    Задаёт высоту строки. Если задавать без единиц измерения, например,line-height: 2, значение будет воспринято как множитель.

Собственные шрифты

Для подключения собственного шрифта используется правило @font-face.

@font-face {
  font-family: 'Philosopher'; /* Название шрифта*/
  font-style: normal;         /* Начертание */
  font-weight: 400;           /* Насыщенность */
  src: url(./fonts/philosopher.woff2) format('woff2'); /* Путь к файлу шрифта и его формат */
}

Для подключение такого шрифта к элементу, используют код:

.selector {
  font-family: 'Philosopher', sans-serif;
}

Google Fonts

Для упрощения подключения шрифтов, используют различные библиотеки шрифтов. К примеру, Google Fonts. Такие библиотеки содержат сотни шрифтов, а так же оптимизаторы для браузеров. Всё что нам нужно — выбрать требуемый шрифт, выбрать, какие начертания и языки нам требуются (для русского языка Cyrillic), подключить в<head> стиль шрифта, имеющий примерно такой вид:

<head>
  ...
  <link href="https://fonts.googleapis.com/css?family=Philosopher:400,700&display=swap&subset=cyrillic" rel="stylesheet">
  ...
</head>