FontLens

Bezplatné rozšíření pro Chrome

Jaké je to písmo? Klikněte pravým a zobrazte CSS

Vyberte text na libovolné stránce, klikněte pravým tlačítkem a zvolte „Inspect font with FontLens“. Nad stránkou se otevře inspektor s rodinou, velikostí, řezem, výškou řádku, barvou, CSS připraveným ke kopírování a tlačítkem pro stažení fontu.

Přidat do Chrome — zdarma

Funguje také v prohlížečích Edge, Brave, Opera a dalších založených na Chromiu.

Inspektor FontLens: ukázka Ag mezi linkami výšky verzálek, výšky x a účaří, vlastnosti písma a ukázka Tailwind

V kostce

What it does
Zobrazí písmo vybraného textu: rodinu, velikost, řez, výšku řádku, barvu i další styly odlišné od výchozích a CSS připravené ke kopírování.
How to start
Vyberte text, klikněte pravým tlačítkem a zvolte „Inspect font with FontLens“. Položka nabídky se zobrazí jen při vybraném textu.
Copy as
CSS, SCSS, SASS nebo Tailwind s velikostí v px, rem, pt nebo em.
Font file
„Download font“ stáhne webový font z jeho zdroje @font-face. Před použitím si ověřte licenci.
Who it is for
Weboví designéři, front-end vývojáři, auditoři přístupnosti a studenti CSS.
Price
Zdarma. Bez účtu a placené verze.
Data
Běží v prohlížeči. Bez serverů a analytiky. Jediný požadavek je stažení fontu, které spustíte.
Works in
Chrome a další prohlížeče Chromium, které instalují z Chrome Web Store. Firefox ani Safari podporovány nejsou.
Limits
Čte CSS skutečného textu na webových stránkách. Ne text v obrázcích, plátnech či PDF ani vlastní stránky Chrome.
Verze
2.2.0, aktualizováno 23. října 2026

Ke písmu na dvě kliknutí

  1. 1

    Select text

    Nadpis, odstavec nebo popisek tlačítka na libovolné stránce.

  2. 2

    Right-click

    Zvolte „Inspect font with FontLens“. Nad stránkou se otevře inspektor s rodinou, velikostí, řezem, výškou řádku a barvou.

  3. 3

    Copy or tweak

    Zkopírujte CSS nebo Tailwind, vyzkoušejte jinou velikost či barvu v živém náhledu nebo stáhněte soubor fontu.

Proč ho lidé otevírají

Aa

Zjistěte název písma

Líbí se vám nadpis? Vyberte ho a zjistěte rodinu, řez i zdroj písma: Google Fonts, Adobe Fonts nebo samotný web.

{ }

Porovnejte s návrhem

Porovnejte hodnoty na živé stránce se souborem návrhu a zkopírujte pravidla jako CSS, SCSS, SASS nebo Tailwind.

4.5:1

Zkontrolujte kontrast

Zjistěte kontrastní poměr se značkami AA a AAA. Před zveřejněním zkuste tmavší text nebo světlejší pozadí.

Co umí

  • Ukázka s vodítky

    První rodina ze seznamu, vykreslená mezi linkami výšky verzálek, výšky x a účaří změřenými přímo z písma.

  • formáty ukázek

    CSS, SCSS, SASS a Tailwind. Zkopírujte celou ukázku nebo jeden řádek; poslední formát se uloží.

  • Vaše jednotky

    Zobrazte velikost v px, rem, pt nebo em v polích i ukázce. rem vychází z kořenové velikosti stránky.

  • Zdroj písma

    Štítek ukazuje zdroj písma: Google Fonts, Adobe Fonts, vlastní hosting nebo systémový font v počítači.

  • Kontrola kontrastu

    Poměr mezi textem a pozadím se značkami AA a AAA pro běžný i velký text. Při změně barev se průběžně aktualizuje.

  • Stáhnout font

    Stáhne soubor ze zdroje @font-face a pojmenuje ho podle rodiny. Pokud server stahování blokuje, zdroj se otevře na nové kartě.

Proč v DevTools hledání písma tolik trvá

Stránka uvádí seznam písem a prohlížeč použije první dostupné. Chcete-li zjistit které, otevřete DevTools, najděte prvek, projděte panel Computed a pak hledejte soubor písma v panelu Network. Velikost, řez, výška řádku a barva jsou na různých místech.

FontLens přečte vypočítaný styl vybraného textu a zobrazí vše v jednom panelu: seznam rodin, ukázku první rodiny, hodnoty, zdroj písma a CSS. Čte CSS stránky, proto neurčí písmo v obrázku.

Nic neopouští váš prohlížeč

  • Bez účtu a serverů

    FontLens běží v prohlížeči. Bez analytiky a sledování.

  • Čte vybraný text

    Inspektor čte styly textu, na který jste klikli pravým tlačítkem. O stránce se nikam nic neposílá.

  • Čtyři oprávnění

    Kontextová nabídka pro kliknutí pravým tlačítkem, přístup k aktivní kartě a stránce pro otevření inspektoru a úložiště pro ukázkový text, jednotku a formát ukázky.

Chrome DevTools a FontLens

Chrome DevTools a FontLensChrome DevToolsFontLens
Najít písmo textuZkontrolovat stránku, najít prvek a otevřít panel ComputedVybrat text, kliknout pravým tlačítkem, zvolit položku nabídky
Kopírovat jako Tailwind nebo SCSSNe, hodnoty kopírujte jednu po druhéZáložka CSS, SCSS, SASS nebo Tailwind
Odkud písmo pocházíHledejte soubor písma v panelu NetworkŠtítek: Google Fonts, Adobe Fonts, vlastní hosting nebo systém
Stáhnout soubor písmaNajděte ho v Network nebo Sources a uložteJedno tlačítko
Kontrola kontrastuV dialogu pro výběr barev v panelu StylesZnačky AA a AAA vedle živého náhledu
CenaVestavěnéZdarma

Otázky

Jak zjistím, jaké písmo web používá?

Přidejte FontLens do Chrome, vyberte text na webu, klikněte pravým tlačítkem a zvolte „Inspect font with FontLens“. Uvidíte rodinu, velikost, řez, výšku řádku, barvu i zdroj písma.

Jak zkopíruji CSS písma z webu?

V inspektoru vyberte kartu CSS, SCSS, SASS nebo Tailwind a stiskněte „Copy all“, případně zkopírujte jeden řádek. Podle potřeby nejdřív přepněte jednotku na px, rem, pt nebo em.

Můžu stáhnout písmo z webu?

Pokud text používá webový font, „Download font“ stáhne soubor z jeho zdroje @font-face. Systémový font stáhnout nelze. Před použitím ve vlastním projektu si ověřte licenci.

Dokáže FontLens určit písmo na obrázku nebo v PDF?

Ne. Čte CSS skutečného textu na webových stránkách, takže neurčí písmo v obrázcích, plátnech ani PDF.

Jak zkontroluji kontrast textu podle WCAG?

Náhled ukazuje kontrastní poměr barvy textu a pozadí se značkami AA a AAA pro běžný i velký text. Změňte kteroukoli barvu a značky se aktualizují.

Může zobrazit velikost v rem místo px?

Ano. Přepněte jednotku na px, rem, pt nebo em a pole i ukázka se přizpůsobí. rem se počítá z kořenové velikosti písma stránky a vaše volba se uloží.

Je zdarma? Sbírá nějaká data?

Je zdarma a bez účtu. Nemá servery ani analytiku; jediný požadavek je stažení fontu, které spustíte.

Funguje v Edge, Brave nebo Opera?

Většina prohlížečů Chromium instaluje rozšíření z Chrome Web Store, včetně Edge, Brave, Opera a Vivaldi. Firefox ani Safari nejsou podporovány.

Další rozšíření zdarma od PYROCTAL

Jaké je to písmo? Dvě kliknutí.

Add to Chrome — free