Перевіряйте шрифти на будь-якій сторінці
Наведіть курсор і клацніть текст, щоб побачити гарнітуру, розмір, товщину, стиль і колір у реальному часі — біля елемента або в бічній панелі — без відкриття 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 у панелі, щоб відкрити запит за цим ім’ям.