FontLens

Vyberte ľubovoľný text, kliknite pravým tlačidlom myši a okamžite skontrolujte jeho písmo, veľkosť, hrúbku, farbu a CSS.

Už ste sa niekedy ocitli na stránke, obdivovali písmo a kládli si otázku „čo je to za font?“ FontLens odpovie na túto otázku jediným kliknutím. Vyberte ľubovoľný text na ľubovoľnej webovej stránke, kliknite pravým tlačidlom myši a vyberte „Preskúmať font pomocou FontLens“. Priamo na stránke sa otvorí čistý, cielene zameraný panel, ktorý odhalí, ako presne je text štylizovaný: typ písma, jeho veľkosť, hrúbku, výšku riadku, farbu a všetky ostatné detaily, ktoré stoja za dizajnom. Či už ste dizajnér, ktorý spätne analyzuje rozloženie, vývojár, ktorý prispôsobuje špecifikáciu, alebo ste jednoducho zvedaví na krásny nadpis, tento nástroj premení akúkoľvek webovú stránku na otvorenú knihu typografie. FontLens je vyhľadávač fontov a CSS inšpektor v jednom. Nielenže vám povie názov rodiny fontov, ale poskytne vám aj hotový kód, interaktívne prostredie na testovanie nápadov a nástroje prístupnosti na zabezpečenie čitateľnosti vášho textu. Žiadny účet. Žiadna registrácia. Stačí vybrať, kliknúť pravým tlačidlom myši a preskúmať. 🔍 Čo môžete robiť - Odhaliť kompletnú typografiu ľubovoľných vybraných slov: rodinu fontov, veľkosť fontu, hrúbku fontu, výšku riadku a farbu na prvý pohľad - Vidieť dodatočné štýlovanie, ktoré je ľahké prehliadnuť, ako sú medzery medzi písmenami, transformácia textu a štýl fontu - Skopírovať ľubovoľnú jednotlivú vlastnosť jedným kliknutím alebo získať celý súbor pravidiel ako kompletný CSS úryvok - Konvertovať tento úryvok na Tailwind, SCSS alebo SASS prostredníctvom jednoduchých záložiek, potom skopírovať celý alebo riadok po riadku - Experimentovať v živom, upraviteľnom náhľade: prepísať vzorové slová, upraviť hodnoty, vymeniť pozadie a sledovať okamžitú aktualizáciu - Identifikovať, odkiaľ webový font pochádza, pomocou odznaku poskytovateľa (Google Fonts, Adobe Fonts, vlastný hosting alebo vstavaný systémový typ písma) - Uložiť webový font do počítača pomocou tlačidla "Stiahnuť font", stiahnutý priamo z jeho vlastného zdroja - Skontrolovať farebný kontrast podľa štandardov WCAG, s presným pomerom plus výsledky AA a AAA pri prechode alebo zlyhaní - Vybrať a vzorkovať farby pomocou kompletného výberu farieb, vrátane pipety na získanie akéhokoľvek pixelu na obrazovke - Prepnúť meracie jednotky medzi px, rem, pt a em, aplikované na polia aj na exportovaný kód 🖱️ Ako to funguje Používanie FontLens trvá sekundy. Zvýraznite slová, ktoré chcete preskúmať, kliknite pravým tlačidlom myši na výber a z ponuky vyberte „Preskúmať font pomocou FontLens“. Panel sa objaví nad aktuálnou stránkou, úhľadne štylizovaný tak, aby sa nikdy nerozporoval s vlastným vzhľadom stránky. Odtiaľ môžete čítať detaily, kopírovať, čo potrebujete, alebo začať upravovať. Živý náhľad je zábavný. Zmeňte formuláciu, aby ste otestovali skutočný nadpis, posuňte veľkosť, upravte hrúbku alebo nastavte novú farbu pozadia, aby ste videli, ako sa typ drží. Vaše úpravy zostanú zachované, keď prechádzate medzi stránkami a vrátite sa neskôr, takže nápad, ktorý ste začali na jednej stránke, vás bude čakať na ďalšej. Keď chcete späť pôvodné hodnoty, tlačidlo „Obnoviť na stránku“ obnoví všetko, čo stránka skutočne používa. Potrebujete pôvodný súbor? Pre stiahnuteľný webový font jedno tlačidlo načíta skutočný súbor z jeho umiestnenia @font-face. Pre typ písma, ktoré je už dodávané s vaším operačným systémom, vám FontLens povie, že ide o vstavaný font, takže viete, že je k dispozícii bez akéhokoľvek sťahovania. 🔒 Súkromie na prvom mieste FontLens beží výhradne vo vašom prehliadači. Nezhromažďujú sa žiadne údaje, žiadne sledovanie, žiadne analýzy a žiadne externé servery sa nezapájajú do kontroly textu. Všetko, čo preskúmate, zostane na vašom počítači. Rozšírenie vykoná presne jednu sieťovú požiadavku, a to len vtedy, keď úmyselne stlačíte „Stiahnuť font“, vtedy sa spojí s vlastným zdrojom tohto fontu, aby stiahlo súbor. Nič iné neopustí vaše zariadenie. Povolenia sú zámerne úzke. Povolenie na kontextovú ponuku pridá položku pravého kliknutia. Povolenie na aktívnu kartu umožňuje nástroju čítať text, ktorý ste vybrali na karte, kde ho vyvoláte, a nikde inde. Úložisko uchováva váš náhľad textu a vaše preferencie jednotiek a formátu, aby si ich pamätal nabudúce. Neexistuje žiadny široký prístup k vašej histórii prehliadania a žiadne rozsiahle povolenia hostiteľov. 👥 Pre koho je určený - Weboví dizajnéri, ktorí chcú identifikovať typ písma, zachytiť paletu a rýchlo znova použiť štýly - Front-end vývojári, ktorí prispôsobujú maketu alebo prenášajú presné hodnoty rodiny fontov a rozstupov do kódu - UI a UX inžinieri, ktorí vytvárajú konzistentné typové systémy v súlade so značkou - Študenti, ktorí sa učia CSS a typografiu a chcú vidieť, ako sú zostavené skutočné stránky - Audítori prístupnosti, ktorí overujú, či text spĺňa požiadavky na kontrast WCAG pred nasadením - Blogeri, marketéri a zvedaví čitatelia, ktorí jednoducho chcú vedieť, aký font stránka používa ✨ Prečo si ho ľudia nechávajú - Jedno pravé kliknutie vám dá odpoveď namiesto kopania v vývojárskych nástrojoch - Kód je pripravený na kopírovanie v čistom CSS, Tailwind, SCSS alebo SASS, takže ho môžete priamo vložiť do svojho projektu - Upraviteľný náhľad vám umožňuje prototypovať typové voľby bez toho, aby ste sa dotkli jediného riadku kódu - Kontrola kontrastu integruje prístupnosť do vášho pracovného postupu, namiesto toho, aby ju nechávala ako dodatočnú myšlienku - Výber farieb a pipeta znamenajú, že môžete vzorkovať a znova použiť presné farby z ľubovoľného miesta na stránke - Svetlé a tmavé témy automaticky sledujú váš operačný systém, takže sa cítia doma vo dne aj v noci - Prepínanie jednotiek medzi px, rem, pt a em udržuje výstup v súlade s tým, ako je napísaný váš codebase 🎨 Podrobnejší pohľad na detaily Typografia je viac než len názov. FontLens odhaľuje malé rozhodnutia, vďaka ktorým text pôsobí správne, od hrúbky nadpisu po priestor v riadkovaní a jemné sledovanie rozstupu písmen. Pohľad na tieto hodnoty vedľa seba vám pomôže pochopiť, prečo dizajn funguje a ako ho znova vytvoriť. Odznak poskytovateľa tiež pridáva kontext, na prvý pohľad vám povie, či sa pozeráte na zdroj Google Fonts, Adobe Fonts, súbor hostený samostatne alebo systémový predvolený typ, čo je často prvá stopa, keď sa pokúšate nájsť alebo získať typ písma. Nástroje na farby presahujú statické zobrazenie. Výber farieb ponúka HSV štvorec s posuvníkmi odtieňa a alfa a hovorí HEX, RGB a HSL, takže môžete pracovať v akomkoľvek formáte, ktorý vám vyhovuje. Spojte to s pipetou a môžete zdvihnúť presný odtieň ľubovoľného prvku a vložiť ho do vášho náhľadu alebo poznámok. 🚀 Začnite skúmať Pridajte FontLens, zvýraznite niektoré slová a kliknite pravým tlačidlom myši, aby ste odhalili typografiu, štýly a farby za akoukoľvek stránkou. Je to rýchly, súkromný a skutočne užitočný spoločník pre každého, komu záleží na tom, ako sa web číta. Nainštalujte si ho, majte ho po ruke a už nikdy sa nebudete čudovať nad záhadným písmom.