FontLens

Выделите текст, щелкните правой кнопкой мыши и мгновенно узнайте его шрифт, размер, толщину, цвет и CSS — копируйте, изменяйте,…

Вы когда-нибудь заходили на страницу, восхищались шрифтом и задавались вопросом «что это за шрифт?» FontLens отвечает на этот вопрос одним щелчком мыши. Выберите любой текст на любом веб-сайте, щелкните правой кнопкой мыши и выберите «Проверить шрифт с помощью FontLens». Чистая, сфокусированная панель открывается прямо над страницей и показывает, как именно оформлен этот текст: шрифт, его размер, толщина, высота строки, цвет и все остальные детали, скрывающиеся за дизайном. Независимо от того, являетесь ли вы дизайнером, реверс-инжинирингом макета, разработчиком, соответствующим спецификации, или просто любопытствующим по поводу красивого заголовка, этот инструмент превращает любую веб-страницу в открытую книгу типографики. FontLens — это средство поиска шрифтов и инспектор CSS в одном флаконе. Он не просто называет семейство шрифтов, он предоставляет вам готовый к использованию код, интерактивную площадку для тестирования идей и инструменты доступности, чтобы убедиться, что ваш текст читаем. Без аккаунта. Без регистрации. Просто выберите, щелкните правой кнопкой мыши и изучите. 🔍 Что вы можете сделать - Мгновенно увидеть полную типографику любых выделенных слов: семейство шрифтов, размер шрифта, толщину шрифта, высоту строки и цвет - Увидеть дополнительные стили, которые легко пропустить, такие как межбуквенный интервал, преобразование текста и стиль шрифта - Скопировать любое отдельное свойство одним щелчком мыши или получить весь набор правил в виде полного фрагмента CSS - Преобразовать этот фрагмент в Tailwind, SCSS или SASS с помощью простых вкладок, затем скопировать целиком или построчно - Экспериментировать в живом, редактируемом предварительном просмотре: переписывать примерные слова, настраивать значения, менять фон и смотреть, как он мгновенно обновляется - Определить, откуда взялся веб-шрифт, с помощью значка поставщика (Google Fonts, Adobe Fonts, саморазмещенный или встроенный системный шрифт) - Сохранить веб-шрифт на свой компьютер с помощью кнопки «Скачать шрифт», извлекая его прямо из собственного источника - Проверить контрастность цвета на соответствие стандартам WCAG, с точным коэффициентом, а также результатами прохождения или непрохождения AA и AAA - Выбрать и образцать цвета с помощью полного палитры, включая пипетку для захвата любого пикселя на экране - Переключать единицы измерения между px, rem, pt и em, применяемые как к полям, так и к экспортируемому коду 🖱️ Как это работает Использование FontLens занимает секунды. Выделите слова, которые вы хотите изучить, щелкните правой кнопкой мыши по выделению и выберите «Проверить шрифт с помощью FontLens» из меню. Панель появляется над текущей страницей, аккуратно оформленная так, что она никогда не конфликтует с внешним видом сайта. Оттуда вы можете прочитать детали, скопировать то, что вам нужно, или начать редактирование. Динамический предварительный просмотр — это то, где начинается самое интересное. Измените формулировку, чтобы протестировать реальный заголовок, слегка измените размер, толщину или установите новый цвет фона, чтобы увидеть, как выглядит шрифт. Ваши изменения сохраняются при переходе между страницами и остаются там, когда вы возвращаетесь позже, поэтому идея, начатая на одном сайте, ждет вас на следующем. Когда вы хотите вернуть исходные значения, кнопка «Сбросить до сайта» восстанавливает все, что фактически используется на странице. Нужен исходный ресурс? Для загружаемого веб-шрифта одна кнопка извлекает реальный файл из его местоположения @font-face. Для шрифта, который уже поставляется с вашей операционной системой, FontLens указывает, что это встроенный шрифт, так что вы знаете, что он доступен без какой-либо загрузки. 🔒 Конфиденциальность прежде всего FontLens полностью работает внутри вашего браузера. Никакого сбора данных, отслеживания, аналитики и внешних серверов, участвующих в проверке текста. Все, что вы изучаете, остается на вашей машине. Расширение делает только один сетевой запрос, и только когда вы намеренно нажимаете «Скачать шрифт», в этот момент оно обращается к собственному источнику этого шрифта для извлечения файла. Ничто другое не покидает ваше устройство. Разрешения намеренно ограничены. Разрешение контекстного меню добавляет запись в контекстное меню. Разрешение активной вкладки позволяет инструменту читать текст, который вы выбрали на вкладке, где вы его вызываете, и нигде больше. Хранилище сохраняет ваш текст предварительного просмотра и ваши предпочтения единиц измерения и формата, чтобы они запоминались в следующий раз. Нет широкого доступа к вашей истории просмотров и нет обширных разрешений хоста. 👥 Для кого это - Веб-дизайнеры, которые хотят идентифицировать шрифт, захватить палитру и быстро повторно использовать стили - Front-end разработчики, сопоставляющие макет или переносящие точные значения семейства шрифтов и интервалов в код - Инженеры UI и UX, создающие согласованные, соответствующие бренду типографские системы - Студенты, изучающие CSS и типографию, которые хотят увидеть, как создаются реальные сайты - Аудиторы доступности, проверяющие, соответствует ли текст требованиям контрастности WCAG перед выпуском - Блогеры, маркетологи и любопытные читатели, которые просто хотят узнать, какой шрифт используется на сайте ✨ Почему люди продолжают использовать это - Один правый щелчок дает вам ответ вместо того, чтобы копаться в инструментах разработчика - Код готов к копированию в виде обычного CSS, Tailwind, SCSS или SASS, поэтому его можно сразу вставить в ваш проект - Редактируемый предварительный просмотр позволяет прототипировать выбор типа без написания единой строки кода - Проверка контрастности встраивает доступность в ваш рабочий процесс, а не оставляет ее на потом - Палитра цветов и пипетка позволяют вам образцать и повторно использовать точные цвета из любого места на странице - Светлые и темные темы автоматически следуют за вашей операционной системой, поэтому она чувствует себя как дома днем ​​и ночью - Переключение единиц измерения между px, rem, pt и em сохраняет вывод в соответствии с тем, как написана ваша кодовая база 🎨 Подробнее о деталях Типография — это больше, чем название. FontLens выводит на поверхность небольшие решения, которые заставляют текст выглядеть правильно, от толщины заголовка до свободного пространства в высоте строки и тонкого трекинга межбуквенного интервала. Просмотр этих значений рядом помогает понять, почему дизайн работает и как его воссоздать. Значок поставщика также добавляет контекст, мгновенно сообщая вам, смотрите ли вы на ресурс Google Fonts, шрифт Adobe Fonts, самостоятельно размещенный файл или системный по умолчанию, что часто является первым ключом при попытке подобрать или найти шрифт. Инструменты цвета выходят за рамки статического считывания. Палитра предлагает квадрат HSV с ползунками оттенка и альфа-канала, и она поддерживает HEX, RGB и HSL, чтобы вы могли работать в любом формате, который вам подходит. В сочетании с пипеткой вы можете получить точный оттенок любого элемента и вставить его в предварительный просмотр или в заметки. 🚀 Начните проверку Добавьте FontLens, выделите несколько слов и щелкните правой кнопкой мыши, чтобы увидеть типографику, стили и цвета любой страницы. Это быстрый, конфиденциальный и по-настоящему полезный помощник для всех, кто заботится о том, как выглядит веб. Установите его, держите под рукой и больше никогда не задавайтесь вопросом о загадочном шрифте.