Какие есть форматы цвета в CSS и как работать со шрифтами и текстом?

Вопрос

Какие форматы задания цвета есть в CSS, как настраивается font-family и какие свойства управляют текстом?

Короткий ответ

Цвет можно задать через hex, rgb()/rgba(), hsl()/hsla() или современный oklch(); шрифты подключаются через стек font-family с фолбэками или собственным файлом через @font-face; за типографику отвечают line-height, letter-spacing, text-overflow и похожие свойства.

Подробный ответ

Форматы цвета:

• hex (#ff0000, #f00) — компактная запись RGB в шестнадцатеричном виде, самая распространённая.
• rgb()/rgba() (rgb(255 0 0), rgba(255, 0, 0, 0.5)) — цвет через каналы красный/зелёный/синий, a — прозрачность.
• hsl()/hsla() (hsl(0 100% 50%)) — цвет через тон (hue), насыщенность (saturation), яркость (lightness). Удобен для программной генерации палитр (например, менять только lightness для затемнения/осветления).
• oklch() — современный перцептивно-равномерный формат (lightness, chroma, hue). В отличие от HSL, одинаковое изменение lightness визуально выглядит одинаково для любого цвета, а также поддерживает более широкую цветовую гамму (P3).

Шрифты:

font-family задаётся списком через запятую — это фолбэк-цепочка: браузер использует первый доступный шрифт из списка, а в конце обычно указывают общее семейство (sans-serif, serif, monospace) на случай, если ничего из перечисленного не установлено.

@font-face позволяет подключить собственный шрифт файлом (обычно .woff2), а не полагаться на системные. Важные детали: font-display управляет поведением при загрузке (swap — сразу показать текст фолбэк-шрифтом, заменить когда загрузится), а несколько @font-face с одинаковым font-family, но разными font-weight/font-style образуют одно семейство с начертаниями.

Текстовые свойства:

• line-height — высота строки; без единиц (1.5) масштабируется от font-size элемента, что предпочтительнее фиксированных px.
• letter-spacing — расстояние между символами, полезно для заголовков капсом.
• text-overflow: ellipsis — обрезает переполненный текст многоточием, но требует overflow: hidden и white-space: nowrap в паре, иначе не сработает.

Пример

:root {
  --brand-color: oklch(65% 0.2 250);
  --brand-color-fallback: hsl(220 90% 55%);
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  color: var(--brand-color-fallback);
  color: var(--brand-color);
}

.card-title {
  letter-spacing: 0.02em;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

Дополнительные вопросы

• Чем oklch() лучше hsl() для программной генерации палитр?
• Почему font-display: swap может привести к "прыжку" макета (layout shift)?
• Как многоточие для многострочного текста реализовать через -webkit-line-clamp?