Эксперименты с text-fit: нативное автомасштабирование текста в CSS

Приходилось ли вам высчитывать размеры шрифтов через clamp(), медиазапросы или подключать JS-библиотеки вроде FitText, чтобы текст идеальной плашкой вписывался в контейнер? Похоже, скоро это уйдет в прошлое.

Крейн Хутмер (Krijn Hoetmer) разобрал экспериментальное CSS-свойство text-fit, заполняя пробелы в еще неполной документации.

Главное из разбора:

• Как работает: Свойство автоматически подгоняет размер текста под рамки родительского контейнера.
• Основные режимы:
  • grow: увеличивает текст, если в контейнере есть свободное место (начиная от базового font-size).
  • shrink: уменьшает текст, если он упирается в границы контейнера и вылезает за них.
• Управление масштабированием: Поддерживаются различные стратегии подгонки — подгонять весь блок целиком, построчно или построчно с отдельной логикой для последней строки.
• Границы контроля: Минимальный и максимальный порог масштабирования можно ограничить в процентах.
• Важный нюанс: text-fit влияет только на визуальную отрисовку. Вычисленное значение font-size в DOM при этом остаётся неизменным — а значит, отслеживание размеров или CSS-каскад не ломаются.

Что по поддержке? Фича пока экспериментальная и доступна за флагом начиная с Chrome 150.

Читать полный разбор

Как вам апишка? Ждали нативный аналог FitText в спецификации или clamp() и cqi в типографике закрывают все ваши потребности?