Проверяйте шрифты на любой странице
Наведите курсор и кликните по тексту, чтобы увидеть шрифт, размер, начертание, стиль и цвет в реальном времени—рядом с элементом или в боковой панели—без открытия DevTools.
what the font - font finder
Определяйте шрифт и CSS-типографику любого элемента на веб-странице—семейство, размер, начертание, высоту строки, межбуквенный интервал, цвет и контраст—и копируйте или экспортируйте нужное, не покидая вкладку.
Создано для живой типографики
Возможности
Важные типографические детали
Читайте высоту строки, межбуквенный интервал, transform, decoration и контраст (включая подсказки AAA/AA) в одной панели.
Копируйте CSS одним кликом
Скопируйте семейство шрифта, цвет или готовый CSS-фрагмент для проверенного элемента.
Редактируйте стили на странице
Меняйте начертание, размер, интервалы, цвет и другое на живом элементе, затем сбросьте, когда закончите исследование.
Все шрифты на странице
Сканируйте уникальные текстовые стили на странице и переключайтесь между ними при аудите дизайн-системы.
Экспорт и Google Fonts
Экспортируйте типографику как SCSS или JSON или откройте поиск в Google Fonts для найденного семейства.
Просто по замыслу
О нас
Расширение Chrome, которое показывает живую типографику—шрифт, размер, начертание, цвет и контраст—чтобы проверять, копировать и экспортировать шрифты с любой веб-страницы.
- —
- Опубликованный общий объём использования
- —
- Проверенное число отзывов
Chrome Web Store
Пользователи о нас
Иллюстративные примеры отзывов — отзывы из Chrome Web Store заменят их после подключения.
★★★★★
“Могу взять семейство, начертание и hex-цвет с живого сайта без открытия DevTools.”
★★★★★
“Копирование CSS и контраста в одной панели — именно то, что нужно при аудитах.”
★★★★★
“Все шрифты на странице помогают быстро заметить несогласованную типографику на лендинге.”
Три быстрых шага
Как пользоваться
-
Установите расширение
Добавьте what the font - font finder из Chrome Web Store и закрепите на панели инструментов.
-
Начните проверку
Откройте popup, начните проверку, затем наведите курсор и кликните по любому тексту на странице.
-
Копируйте или экспортируйте
Копируйте CSS, экспортируйте стили, откройте Google Fonts или просмотрите все шрифты на странице.
Ответы до установки
Частые вопросы
Как определить шрифт на сайте?
Установите what the font - font finder, начните проверку, наведите курсор на текст и кликните, чтобы открыть панель с семейством, размером, начертанием и цветом.
Можно ли скопировать CSS для видимого текста?
Да. В панели можно скопировать семейство шрифта, цвет или CSS-фрагмент для проверенного элемента.
Работает ли на каждой странице?
Работает на обычных вкладках сайтов. Системные страницы Chrome и некоторые ограниченные URL проверить нельзя.
Можно ли увидеть все шрифты на странице?
Используйте Все шрифты на странице, чтобы вывести уникальные видимые текстовые стили и открыть любой в панели деталей.
Можно ли менять вид во время проверки?
Да. Редактируйте начертание, размер, интервалы, цвет и связанные стили элемента, затем сбросьте, чтобы восстановить исходное.
Где открыть Google Fonts?
Когда семейство кажется подходящим для поиска, используйте действие Google Fonts в панели, чтобы открыть запрос по этому имени.