FontLens

Виділіть текст, клацніть правою кнопкою миші, та миттєво переглядайте шрифт, розмір, вагу, колір та CSS – копіюйте, налаштовуйте,…

Ви коли-небудь заходили на сторінку, захоплювалися шрифтом і запитували: "Що це за шрифт?" FontLens відповідає на це запитання одним клацанням миші. Виділіть будь-який текст на будь-якому веб-сайті, клацніть правою кнопкою миші та виберіть "Перевірити шрифт за допомогою FontLens" ("Inspect font with FontLens"). Чиста, сфокусована панель відкривається прямо над сторінкою та показує, як саме оформлений цей текст: гарнітуру, її розмір, насиченість, висоту рядка, колір та всі інші деталі, що стоять за дизайном. Незалежно від того, чи ви дизайнер, що виконує реверс-інжиніринг макета, розробник, що відповідає специфікації, або просто цікавитеся красивим заголовком, цей інструмент перетворює будь-яку веб-сторінку на відкриту книгу типографіки. "FontLens" (Перевірка шрифту) — це засіб пошуку шрифтів та інспектор CSS, об'єднані в одному. Він не просто називає сімейство шрифтів, він надає готовий код, інтерактивний майданчик для тестування ідей та інструменти доступності, щоб забезпечити читабельність вашого тексту. Без облікового запису. Без реєстрації. Просто виділіть, клацніть правою кнопкою миші та вивчіть. 🔍 Що ви можете зробити – Розкрийте повну типографіку будь-яких виділених слів: сімейство шрифтів, розмір шрифту, насиченість шрифту, висоту рядка та колір з першого погляду – Перегляньте додаткові стилі, які легко пропустити, такі як інтервал між літерами, трансформація тексту та стиль шрифту – Скопіюйте будь-яку окрему властивість одним клацанням миші або візьміть весь набір правил як повний фрагмент CSS – Перетворіть цей фрагмент на Tailwind, SCSS або SASS за допомогою простих вкладок, а потім скопіюйте цілком або по рядку – Експериментуйте в живому, редагованому попередньому перегляді: перепишіть зразки слів, змініть значення, поміняйте фон і спостерігайте, як це миттєво оновлюється – Визначте, звідки походить веб-шрифт, за допомогою значка постачальника (Google Fonts, Adobe Fonts, самостійно розміщений або вбудований системний шрифт) – Збережіть веб-шрифт на свій комп'ютер за допомогою кнопки "Завантажити шрифт" ("Download font"), витягнутої безпосередньо з його власного джерела – Перевірте контраст кольорів відповідно до стандартів WCAG, з точним співвідношенням і результатами проходження/непроходження AA та AAA – Виберіть і спробуйте кольори за допомогою повного палітропідбірника, включаючи піпетку, щоб захопити будь-який піксель на екрані – Перемикайте одиниці вимірювання між px, rem, pt та em, застосовані як до полів, так і до експортованого коду 🖱️ Як це працює Використання FontLens займає секунди. Виділіть слова, які ви хочете вивчити, клацніть правою кнопкою миші по виділенню і виберіть "Перевірити шрифт за допомогою FontLens" ("Inspect font with FontLens") з меню. Панель з'явиться над поточною сторінкою, акуратно стилізована, щоб вона ніколи не конфліктувала з зовнішнім виглядом сайту. Звідти ви можете читати деталі, копіювати те, що вам потрібно, або почати редагування. Живий попередній перегляд – це те місце, де стає цікаво. Змініть формулювання, щоб протестувати справжній заголовок, змініть розмір, налаштуйте насиченість або встановіть новий колір фону, щоб побачити, як виглядає текст. Ваші правки залишаються, коли ви переходите між сторінками і повертаєтеся пізніше, тому ідея, яку ви почали на одному сайті, чекатиме на вас на наступному. Коли ви захочете повернути вихідні значення, кнопка "Скинути до сайту" ("Reset to site") відновлює все, що фактично використовується на сторінці. Потрібен необроблений ресурс? Для веб-шрифту, що завантажується, одна кнопка витягує реальний файл з його місцезнаходження @font-face. Для гарнітури, яка вже постачається з вашою операційною системою, FontLens повідомляє вам, що це вбудований шрифт, тому ви знаєте, що він доступний без будь-якого завантаження. 🔒 Конфіденційність передусім FontLens працює повністю у вашому браузері. Немає збору даних, відстеження, аналітики та зовнішніх серверів, задіяних у перевірці тексту. Все, що ви досліджуєте, залишається на вашій машині. Розширення робить рівно один мережевий запит, і лише тоді, коли ви свідомо натискаєте "Завантажити шрифт" ("Download font"), після чого воно звертається до власного джерела цього шрифту, щоб отримати файл. Більше нічого не залишає ваш пристрій. Дозволи свідомо вузькі. Дозвіл на контекстне меню додає пункт правого клацання. Дозвіл на активну вкладку дозволяє інструменту читати текст, який ви виділили на вкладці, де ви його викликали, і ніде більше. Сховище зберігає ваш текст попереднього перегляду та ваші налаштування одиниць і формату, щоб вони запам'яталися наступного разу. Немає широкого доступу до вашої історії переглядів і немає всеосяжних дозволів хоста. 👥 Для кого це – Веб-дизайнери, які хочуть ідентифікувати гарнітуру, захопити палітру та швидко повторно використовувати стилі – Фронтенд-розробники, що відповідають макету або переносять точні значення сімейства шрифтів та інтервалів у код – Інженери UI та UX, що створюють послідовні фірмові типографічні системи – Студенти, які вивчають CSS та типографіку і хочуть побачити, як створюються реальні сайти – Аудитори доступності, які перевіряють, чи відповідає текст вимогам контрастності WCAG перед публікацією – Блогери, маркетологи та допитливі читачі, які просто хочуть знати, який шрифт використовує сайт ✨ Чому люди його залишають – Один клацання правою кнопкою миші дає вам відповідь замість того, щоб копатися в інструментах розробника – Код готовий до копіювання у звичайному CSS, Tailwind, SCSS або SASS, тому його можна вставляти прямо у ваш проект – Редагуваний попередній перегляд дозволяє створювати прототипи вибору типу, не торкаючись жодного рядка коду – Перевірка контрастності вбудовує доступність у ваш робочий процес, а не залишає її на потім – Палітропідбірник та піпетка означають, що ви можете вибирати та повторно використовувати точні кольори з будь-якого місця на сторінці – Світла та темна теми автоматично відповідають вашій операційній системі, тому він відчувається рідним вдень та вночі – Перемикання одиниць між px, rem, pt та em підтримує виведення у відповідності до того, як написано ваш код 🎨 Детальніше про деталі Типографіка — це більше, ніж назва. FontLens виявляє дрібні рішення, які роблять текст правильним, від насиченості заголовка до вільного простору у висоті рядка та тонкого відстеження інтервалу між літерами. Перегляд цих значень поруч допомагає зрозуміти, чому дизайн працює і як його відтворити. Значок постачальника також додає контексту, з першого погляду повідомляючи вам, чи дивитеся ви на ресурс Google Fonts, шрифт Adobe Fonts, самостійно розміщений файл або системний за замовчуванням, що часто є першою підказкою, коли ви збираєтеся підібрати або знайти гарнітуру. Інструменти для роботи з кольором виходять за рамки статичного зчитування. Палітропідбірник пропонує квадрат HSV з повзунками відтінку та альфа-каналу, і він працює з HEX, RGB та HSL, щоб ви могли працювати у будь-якому форматі, який вам підходить. Поєднайте це з піпеткою, і ви зможете взяти точний відтінок будь-якого елемента та вставити його у свій попередній перегляд або нотатки. 🚀 Почніть перевіряти Додайте "FontLens" (Перевірка шрифту), виділіть кілька слів і клацніть правою кнопкою миші, щоб розкрити типографіку, стилі та кольори будь-якої сторінки. Це швидкий, приватний і справді корисний компаньйон для кожного, хто піклується про те, як інтерпретується веб-сторінка. Встановіть його, тримайте під рукою і ніколи більше не дивуйтеся таємничому шрифту.