Как с помощью CSS создать «резиновый» шрифт, который плавно масштабируется при изменении размера окна браузера (функция clamp)?

Функция `clamp()` в CSS позволяет задать размер шрифта, который автоматически масштабируется в зависимости от ширины viewport, не выходя за пределы минимального и максимального значений. Это и есть так называемый «резиновый» или fluid-шрифт.

## Синтаксис clamp()

css
font-size: clamp(минимум, предпочтительное_значение, максимум);

— **минимум** — наименьший допустимый размер шрифта (например, `16px`);
— **предпочтительное_значение** — вычисляемое значение, обычно в единицах `vw` или с использованием `calc()`;
— **максимум** — наибольший допустимый размер шрифта (например, `48px`).

## Пример базового использования

css
h1 {
font-size: clamp(20px, 5vw, 60px);
}

В этом примере заголовок будет иметь размер 5% от ширины viewport, но не меньше 20px и не больше 60px.

## Более точная формула с calc()

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

css
font-size: clamp(16px, calc(16px + (48 — 16) * ((100vw — 320px) / (1280 — 320))), 48px);

Здесь шрифт линейно растёт от 16px (при ширине 320px) до 48px (при ширине 1280px).

## Использование CSS-переменных для удобства

css
:root {
—font-min: 16;
—font-max: 48;
—screen-min: 320;
—screen-max: 1280;
}

body {
font-size: clamp(
calc(var(—font-min) * 1px),
calc(var(—font-min) * 1px + (var(—font-max) — var(—font-min)) * ((100vw — calc(var(—screen-min) * 1px)) / (var(—screen-max) — var(—screen-min)))),
calc(var(—font-max) * 1px)
);
}

## Преимущества перед медиазапросами

1. **Плавность** — шрифт меняется непрерывно, а не скачками;
2. **Меньше кода** — не нужно писать множество `@media`-блоков;
3. **Гибкость** — легко настраивать под любой диапазон экранов;
4. **Читаемость** — логика масштабирования сосредоточена в одной строке.

## Поддержка браузерами

Функция `clamp()` поддерживается всеми современными браузерами (Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+). Для старых браузеров можно задать fallback:

css
h1 {
font-size: 32px; /* fallback */
font-size: clamp(20px, 5vw, 60px);
}

## Инструменты для генерации

Для быстрого расчёта значений используйте онлайн-калькуляторы: **Utopia.fyi** или **clamp.font-size.app** — они генерируют готовый CSS-код по заданным параметрам.

Таким образом, `clamp()` — это элегантный и современный способ создания по-настоящему адаптивной типографики без лишнего кода.