Знаете ли вы, что 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>
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/ Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues