Изменения семейства шрифтов
Обнаруживает, когда отображается резервный шрифт вместо основного, или когда меняются объявления font-family.
Типографика — невидимая ткань, которая держит весь контент интерфейса: заголовки, абзацы, кнопки, подписи полей форм, сообщения о состоянии. Типографическая регрессия редко выливается в краш, но ухудшает читабельность, ломает визуальную иерархию и заставляет терять часы на разбор инцидентных отчётов от пользователей. На бизнес-дашборде заголовок, перешедший на две строки, сдвигает все индикаторы ниже; в карточке товара изменение насыщенности у подписи цены может намекнуть на акцию, которой нет. Типичные причины известны: обновление npm-зависимости, ломающее импорт веб-шрифта, смена переменной --font-family в дизайн-системе, изменение глобального line-height ради одной страницы, внедрение text-wrap balance, перекомпонующего строки, или банальное отсутствие fallback для кастомного семейства шрифтов. Расхождения font-weight между 600 и 700 от спринта к спринту остаются классическим источником типографического дрейфа, особенно когда несколько разработчиков работают без строгой хартии. Delta-QA встраивает эти задачи в логику сравнения: инструмент не просто проверяет наличие текста, он сравнивает рендеринг попиксельно и обнаруживает любое изменение насыщенности, межбуквенного интервала, высоты строки или fallback шрифта. Эталонные скриншоты служат стабильным типографическим baseline, и каждый новый запуск визуального тестирования выявляет смещения текста, заголовки, перескакивающие на новую строку, переполнения и вариации веса между версиями. Такой подход даёт командам QA возможность валидировать переработку дизайн-системы или обновление фреймворка через сравнение страниц, не перечитывая вручную каждый экран и без рисков скрытой визуальной регрессии.
Обнаруживает, когда отображается резервный шрифт вместо основного, или когда меняются объявления font-family.
Фиксирует вариации веса (400 vs 500, bold vs semibold) и изменения стиля (italic, oblique).
Отслеживает изменения font-size в px, rem, em и единицах viewport, включая clamp() и fluid-типографику.
Мониторит настройки line-height, которые могут нарушить вертикальный ритм и общий поток страницы.
Обнаруживает изменения letter-spacing и word-spacing, влияющие на плотность и читабельность текста.
Определяет изменения подчёркиваний, зачёркиваний, text-transform и поведения text-overflow.
Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.
Разработчик запускает npm update и, сам того не зная, ломает импорт шрифта Inter. Браузер молча переключается на Arial. Межбуквенные интервалы меняются, некоторые заголовки переносятся на две строки, кнопка вылезает за пределы контейнера — вся вёрстка незаметно съезжает. Изменение казалось безобидным (обновление зависимостей), его смержили без визуальной проверки. Delta-QA сравнивает скриншоты двух версий и выделяет каждый сдвиг текста, каждый перенос заголовка и каждый выход за границы, вызванный сменой шрифта.
Разработчик меняет глобальный line-height для улучшения читаемости блога. Побочный эффект: заголовки товаров, которые помещались в одну строку, переносятся на две. Карточки теряют одинаковую высоту, сетка становится неровной — каталог выглядит «кривым» и вызывает меньше доверия. QA проверил блог (изменённую страницу), но не каталог, который использует те же глобальные стили. Delta-QA сравнивает скриншоты и выделяет каждую карточку, высота которой изменилась — сбои в сетке видны сразу.
Дизайнер задал font-weight semi-bold (600) для заголовков. Со временем разные разработчики используют то 600, то 700. Результат: одни заголовки заметно жирнее других на одной и той же странице. Визуальная иерархия непоследовательна — один заголовок секции кажется важнее другого без всякой причины. Дизайнера не уведомляли об этих постепенных изменениях. Delta-QA сравнивает скриншоты и выделяет различия в толщине заголовков — более жирные заголовки видны при наложении.
Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.