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