FontLens

Bezplatné rozšírenie pre Chrome

Aký je to font? Kliknite pravým tlačidlom a zobrazte CSS

Vyberte text na ľubovoľnej stránke, kliknite pravým tlačidlom a zvoľte „Inspect font with FontLens“. Nad stránkou sa otvorí inspektor s rodinou, veľkosťou, hrúbkou, riadkovaním a farbou, CSS pripraveným na kopírovanie a tlačidlom na stiahnutie fontu.

Pridať do Chrome – zadarmo

Funguje aj v prehliadačoch Edge, Brave, Opera a ďalších založených na Chromium.

Inspektor FontLens: ukážka Ag medzi čiarami výšky verzálok, výšky x a základnej línie, vlastnosti fontu a ukážka Tailwind

V skratke

What it does
Zobrazí font vybraného textu: rodinu, veľkosť, hrúbku, riadkovanie, farbu aj ďalšie štýly odlišné od predvolených, s CSS pripraveným na kopírovanie.
How to start
Vyberte text, kliknite pravým tlačidlom a zvoľte „Inspect font with FontLens“. Položka ponuky sa zobrazí len pri vybratom texte.
Copy as
CSS, SCSS, SASS alebo Tailwind s veľkosťou v px, rem, pt alebo em.
Font file
„Download font“ stiahne webový font z jeho zdroja @font-face. Pred použitím si overte licenciu.
Who it is for
Weboví dizajnéri, front-end vývojári, audítori prístupnosti a študenti CSS.
Price
Zadarmo. Bez účtu a platenej verzie.
Data
Funguje v prehliadači. Bez serverov a analytiky. Jedinou požiadavkou je stiahnutie fontu, ktoré spustíte.
Works in
Chrome a ďalšie prehliadače Chromium, ktoré inštalujú z Chrome Web Store. Firefox ani Safari nie sú podporované.
Limits
Číta CSS skutočného textu na webových stránkach. Nie text v obrázkoch, plátnach či PDF ani vlastné stránky Chrome.
Verzia
2.2.0, aktualizované 23. októbra 2026

K fontu na dve kliknutia

  1. 1

    Select text

    Nadpis, odsek alebo popis tlačidla na ľubovoľnej stránke.

  2. 2

    Right-click

    Zvoľte „Inspect font with FontLens“. Nad stránkou sa otvorí inspektor s rodinou, veľkosťou, hrúbkou, riadkovaním a farbou.

  3. 3

    Copy or tweak

    Skopírujte CSS alebo Tailwind, v živom náhľade vyskúšajte inú veľkosť či farbu alebo stiahnite súbor fontu.

Prečo ho ľudia otvárajú

Aa

Zistite názov písma

Páči sa vám nadpis? Vyberte ho a zistite rodinu, hrúbku aj zdroj fontu: Google Fonts, Adobe Fonts alebo samotná stránka.

{ }

Porovnajte s návrhom

Porovnajte hodnoty na živej stránke so súborom návrhu a potom skopírujte pravidlá ako CSS, SCSS, SASS alebo Tailwind.

4.5:1

Skontrolujte kontrast

Prečítajte si pomer kontrastu so značkami AA a AAA. Pred zverejnením vyskúšajte tmavší text alebo svetlejšie pozadie.

Čo dokáže

  • Ukážka s vodiacimi čiarami

    Prvá rodina zo zoznamu vykreslená medzi čiarami výšky verzálok, výšky x a základnej línie zmeranými priamo z fontu.

  • formáty úryvkov

    CSS, SCSS, SASS a Tailwind. Skopírujte celý úryvok alebo jeden riadok; posledný formát sa zapamätá.

  • Vaše jednotky

    Zobrazte veľkosť v px, rem, pt alebo em v poliach aj v úryvku. rem vychádza z koreňovej veľkosti stránky.

  • Zdroj fontu

    Odznak ukazuje zdroj fontu: Google Fonts, Adobe Fonts, vlastný hosting alebo systémový font v počítači.

  • Kontrola kontrastu

    Pomer medzi textom a pozadím so značkami AA a AAA pre bežný aj veľký text. Pri zmene farieb sa priebežne aktualizuje.

  • Stiahnuť font

    Stiahne súbor zo zdroja @font-face a pomenuje ho podľa rodiny. Ak server sťahovanie blokuje, zdroj sa otvorí na novej karte.

Prečo v DevTools hľadanie fontu trvá tak dlho

Stránka uvádza zoznam fontov a prehliadač použije prvý dostupný. Ak chcete zistiť ktorý, otvorte DevTools, nájdite prvok, pozrite panel Computed a potom hľadajte súbor fontu v paneli Network. Veľkosť, hrúbka, riadkovanie a farba sú na rôznych miestach.

FontLens prečíta vypočítaný štýl vybraného textu a zobrazí ho v jednom paneli: zoznam rodín, ukážku prvej rodiny, hodnoty, zdroj fontu a CSS. Číta CSS stránky, preto neurčí font v obrázku.

Nič neopúšťa váš prehliadač

  • Bez účtu a serverov

    FontLens funguje v prehliadači. Bez analytiky a sledovania.

  • Číta vybraný text

    Inspektor číta štýly textu, na ktorý ste klikli pravým tlačidlom. O stránke sa nikam nič neposiela.

  • Štyri povolenia

    Kontextová ponuka pre kliknutie pravým tlačidlom, prístup k aktívnej karte a stránke na otvorenie inspektora a úložisko pre vzorový text, jednotku a formát úryvku.

Chrome DevTools a FontLens

Chrome DevTools a FontLensChrome DevToolsFontLens
Nájsť font textuSkontrolovať stránku, nájsť prvok a otvoriť panel ComputedVybrať text, kliknúť pravým tlačidlom a zvoliť položku ponuky
Kopírovať ako Tailwind alebo SCSSNie, hodnoty kopírujte po jednejKarta CSS, SCSS, SASS alebo Tailwind
Odkiaľ font pochádzaHľadajte súbor fontu v paneli NetworkOdznak: Google Fonts, Adobe Fonts, vlastný hosting alebo systém
Stiahnuť súbor fontuNájdite ho v Network alebo Sources a uložteJedno tlačidlo
Kontrola kontrastuVo výbere farby v paneli StylesZnačky AA a AAA vedľa živého náhľadu
CenaVstavanéZadarmo

Otázky

Ako zistím, aký font používa webová stránka?

Pridajte FontLens do Chrome, vyberte text na stránke, kliknite pravým tlačidlom a zvoľte „Inspect font with FontLens“. Uvidíte rodinu, veľkosť, hrúbku, riadkovanie, farbu aj zdroj fontu.

Ako skopírujem CSS fontu z webovej stránky?

V inspektore vyberte kartu CSS, SCSS, SASS alebo Tailwind a stlačte „Copy all“ alebo skopírujte jeden riadok. Ak treba, najprv prepnite jednotku na px, rem, pt alebo em.

Môžem stiahnuť font z webovej stránky?

Ak text používa webový font, „Download font“ stiahne súbor z jeho zdroja @font-face. Systémový font sa stiahnuť nedá. Pred použitím vo vlastnom projekte si overte licenciu.

Dokáže FontLens rozpoznať font na obrázku alebo v PDF?

Nie. Číta CSS skutočného textu na webových stránkach, takže nerozpozná fonty v obrázkoch, plátnach ani PDF.

Ako skontrolujem kontrast textu podľa WCAG?

Náhľad zobrazuje pomer kontrastu farby textu a pozadia so značkami AA a AAA pre bežný aj veľký text. Zmeňte ktorúkoľvek farbu a značky sa aktualizujú.

Dokáže zobrazovať veľkosť v rem namiesto px?

Áno. Prepnite jednotku na px, rem, pt alebo em a polia aj úryvok sa prispôsobia. rem sa počíta z koreňovej veľkosti fontu stránky a vaša voľba sa zapamätá.

Je zadarmo? Zhromažďuje údaje?

Je zadarmo a bez účtu. Nemá servery ani analytiku; jedinou požiadavkou je stiahnutie fontu, ktoré spustíte.

Funguje v Edge, Brave alebo Opera?

Väčšina prehliadačov Chromium inštaluje rozšírenia z Chrome Web Store vrátane Edge, Brave, Opera a Vivaldi. Firefox ani Safari nie sú podporované.

Ďalšie bezplatné rozšírenia od PYROCTAL

Aký je to font? Dve kliknutia.

Add to Chrome — free