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, маркирайте няколко думи и щракнете с десен бутон, за да разкриете типографията, стиловете и цветовете зад всяка страница. Това е бърз, личен и наистина полезен помощник за всеки, който се интересува от това как се чете мрежата. Инсталирайте го, дръжте го под ръка и никога повече не се чудете за непознат шрифт.