FontLens

Označte libovolný text, klikněte pravým tlačítkem a okamžitě zkontrolujte písmo, velikost, tloušťku, barvu a CSS – zkopírujte,…

Už vás někdy napadlo, když jste přistáli na stránce, obdivovali písmo a ptali se: „Co je to za písmo?“ Rozšíření FontLens odpovídá na tuto otázku jediným kliknutím. Vyberte libovolný text na jakékoli webové stránce, klikněte pravým tlačítkem a zvolte „Zkontrolovat písmo s FontLens“. Přehledný, zaměřený panel se otevře přímo přes stránku a odhalí přesně, jak je tento text stylizován: typ písma, jeho velikost, tloušťka, výška řádku, barva a všechny další detaily za designem. Ať už jste designér, který reverzním inženýrstvím rozebírá rozložení, vývojář, který ladí specifikace, nebo jednoduše zvědavý na krásný titulek, tento nástroj promění jakoukoli webovou stránku v otevřenou knihu typografie. FontLens je vyhledávač písem a inspektor CSS v jednom. Nejen, že vám pojmenuje rodinu písem, ale také vám předá kód připravený k použití, interaktivní hřiště pro testování nápadů a nástroje pro usnadnění přístupu, aby byl váš text čitelný. Bez účtu. Bez registrace. Stačí vybrat, kliknout pravým tlačítkem a zkoumat. 🔍 Co můžete dělat - Odhalit kompletní typografii jakýchkoli vybraných slov: rodinu písma, velikost písma, tloušťku písma, výšku řádku a barvu na první pohled - Zobrazit dodatečné stylování, které je snadné přehlédnout, jako je mezislovní mezera (letter-spacing), transformace textu (text-transform) a styl písma (font-style) - Zkopírovat jakoukoli jednotlivou vlastnost jedním kliknutím, nebo získat celou sadu pravidel jako kompletní CSS útržek - Převést tento útržek na Tailwind, SCSS nebo SASS pomocí jednoduchých záložek, poté zkopírovat celý nebo řádek po řádku - Experimentovat v živém, editovatelném náhledu: přepsat ukázková slova, upravit hodnoty, změnit pozadí a sledovat okamžitou aktualizaci - Identifikovat, odkud webové písmo pochází, pomocí odznaku poskytovatele (Google Fonts, Adobe Fonts, self-hosted, nebo vestavěné systémové písmo) - Uložit webové písmo do počítače pomocí tlačítka „Stáhnout písmo“, které se stáhne přímo z jeho vlastního zdroje - Zkontrolovat barevný kontrast podle standardů WCAG, s přesným poměrem a výsledky AA a AAA pass nebo fail - Vybrat a vzorkovat barvy pomocí kompletního výběrčíku, včetně kapátka pro zachycení libovolného pixelu na obrazovce - Přepínat měrné jednotky mezi px, rem, pt a em, aplikované na pole i exportovaný kód 🖱️ Jak to funguje Používání FontLens trvá vteřiny. Zvýrazněte slova, která chcete studovat, klikněte pravým tlačítkem na výběr a z nabídky zvolte „Zkontrolovat písmo s FontLens“. Panel se objeví přes aktuální stránku, úhledně stylizovaný tak, aby nikdy nekolidoval s vlastním vzhledem stránky. Odtud můžete číst detaily, kopírovat, co potřebujete, nebo začít upravovat. Živý náhled je to, kde se věci stávají zábavnými. Změňte formulaci, abyste otestovali skutečný titulek, posuňte velikost, upravte tloušťku nebo nastavte novou barvu pozadí, abyste viděli, jak typografie obstojí. Vaše úpravy zůstanou zachovány, když se přesouváte mezi stránkami a vrátíte se později, takže nápad, který jste začali na jedné stránce, na vás bude čekat na další. Když chcete vrátit původní hodnoty, tlačítko „Obnovit na výchozí“ obnoví vše, co stránka skutečně používá. Potřebujete surový zdroj? Pro stáhnutelné webové písmo jedno tlačítko načte skutečný soubor z jeho umístění @font-face. Pro písmo, které je již součástí vašeho operačního systému, vám FontLens sdělí, že je to vestavěné písmo, takže víte, že je k dispozici bez jakéhokoli stahování. 🔒 Soukromí na prvním místě FontLens běží zcela uvnitř vašeho prohlížeče. Při kontrole textu nedochází k žádnému shromažďování dat, sledování, analýzám ani zapojení externích serverů. Vše, co zkoumáte, zůstává na vašem počítači. Rozšíření provede přesně jeden síťový požadavek, a to pouze tehdy, když záměrně stisknete „Stáhnout písmo“, v tu chvíli se obrátí na vlastní zdroj daného písma, aby načetl soubor. Nic jiného neopouští vaše zařízení. Oprávnění jsou záměrně omezena. Oprávnění kontextové nabídky přidává položku do pravého kliknutí. Oprávnění aktivní záložky umožňuje nástroji číst text, který jste vybrali na záložce, kde jej vyvoláte, a nikde jinde. Úložiště uchovává váš text náhledu a vaše preference jednotek a formátu, takže si je pamatuje i příště. Neexistuje žádný široký přístup k vaší historii prohlížení ani rozsáhlá oprávnění hostitele. 👥 Pro koho je to určeno - Weboví designéři, kteří chtějí identifikovat písmo, zachytit paletu a rychle znovu použít styly - Front-end vývojáři, ladící maketu nebo přenášející přesné hodnoty font-family a mezer do kódu - UI a UX inženýři, kteří budují konzistentní, značkové typografické systémy - Studenti, kteří se učí CSS a typografii a chtějí vidět, jak jsou skutečné stránky sestaveny - Auditoři přístupnosti, kteří ověřují, zda text splňuje požadavky WCAG na kontrast před nasazením - Bloggeři, marketéři a zvídaví čtenáři, kteří prostě chtějí vědět, jaké písmo stránka používá ✨ Proč si ho lidé nechávají - Jedno pravé kliknutí vám dává odpověď namísto prohrabování se vývojářskými nástroji - Kód je připraven k zkopírování v jednoduchém CSS, Tailwind, SCSS nebo SASS, takže se bez problémů vloží do vašeho projektu - Editovatelný náhled vám umožňuje prototypovat volby písma, aniž byste se dotkli jediného řádku kódu - Kontrola kontrastu integruje přístupnost do vašeho pracovního postupu, namísto aby ji nechávala jako dodatečnou myšlenku - Výběr barvy a kapátko znamenají, že můžete vzorkovat a znovu použít přesné barvy z libovolného místa na stránce - Světlé a tmavé motivy automaticky sledují váš operační systém, takže se cítíte jako doma ve dne i v noci - Přepínání jednotek mezi px, rem, pt a em udržuje výstup v souladu s tím, jak je vaše kódová základna napsána 🎨 Podrobnější pohled na detaily Typografie je víc než jen jméno. FontLens odhaluje malá rozhodnutí, která způsobují, že text vypadá správně, od tloušťky nadpisu přes prostor pro řádkování až po jemné mezery mezi písmeny. Vidět tyto hodnoty vedle sebe vám pomůže pochopit, proč design funguje a jak jej znovu vytvořit. Odznak poskytovatele dodává kontext, na první pohled vám řekne, zda se díváte na písmo Google Fonts, Adobe Fonts, samostatně hostovaný soubor nebo systémové výchozí nastavení, což je často první nápověda, když se snažíte najít nebo sladit písmo. Barevné nástroje jdou nad rámec statického zobrazení. Výběr barvy nabízí čtverec HSV s jezdci odstínu a průhlednosti a pracuje s formáty HEX, RGB a HSL, takže můžete pracovat v jakémkoli formátu, který vám vyhovuje. Spojte to s kapátkem a můžete zachytit přesný odstín libovolného prvku a vložit jej do svého náhledu nebo poznámek. 🚀 Začněte zkoumat Přidejte FontLens, zvýrazněte několik slov a klikněte pravým tlačítkem, abyste odhalili typografii, styly a barvy za jakoukoli stránkou. Je to rychlý, soukromý a skutečně užitečný společník pro každého, kdo se zajímá o to, jak se web čte. Nainstalujte si ho, mějte ho po ruce a už se nikdy nebudete divit, co je to za záhadné písmo.