FontLens

Tasuta laiendus Chrome'ile

Mis font see on? Paremklõpsa ja vaata CSS-i

Vali tekst ükskõik millisel veebilehel, tee paremklõps ja vali „Inspect font with FontLens”. Inspektor avaneb lehe kohal ning näitab fondiperekonda, suurust, paksust, reavahet ja värvi. CSS on kopeerimiseks valmis ning nupust „Download font” saad fondi alla laadida.

Lisa Chrome'i — tasuta

Töötab ka Edge'is, Brave'is, Operas ja teistes Chromiumi brauserites.

FontLensi inspektor: näidis Ag cap-height-, x-height- ja baseline-joonte vahel, fondi omadused ning Tailwindi koodinäide

Lühidalt

Mida see teeb
Näitab valitud teksti fonti: perekonda, suurust, paksust, reavahet, värvi ja vaikeseadest erinevaid stiile. CSS on kopeerimiseks valmis.
Alustamine
Vali tekst, tee paremklõps ja vali „Inspect font with FontLens”. Menüüvalik ilmub ainult siis, kui tekst on valitud.
Kopeerimisvorming
CSS, SCSS, SASS või Tailwind, suurus ühikutes px, rem, pt või em.
Fondifail
„Download font” toob veebifondi @font-face allikast. Enne kasutamist kontrolli fondi litsentsi.
Kellele see sobib
Veebidisaineritele, front-end-arendajatele, ligipääsetavuse hindajatele ja CSS-i õppijatele.
Hind
Tasuta. Konto ega tasulist versiooni pole.
Andmed
Töötab sinu brauseris. Servereid ega analüütikat pole. Ainus võrgupäring on sinu algatatud fondi allalaadimine.
Töötab brauserites
Chrome’is ja teistes Chromiumi brauserites, mis saavad laiendusi Chrome Web Store’ist. Firefoxi ega Safarit ei toetata.
Piirangud
Loeb veebilehtede päris teksti CSS-i. Ei tuvasta piltide, canvas-elementide ega PDF-ide teksti ega Chrome’i enda lehtede sisu.
Versioon
2.2.0, uuendatud 23. oktoober 2026

Font kahe klõpsuga

  1. 1

    Vali tekst

    Pealkiri, lõik või nupu tekst ükskõik millisel veebilehel.

  2. 2

    Paremklõpsa

    Vali „Inspect font with FontLens”. Inspektor avaneb lehe kohal ning näitab perekonda, suurust, paksust, reavahet ja värvi.

  3. 3

    Kopeeri või kohanda

    Kopeeri CSS või Tailwind, proovi eelvaates teist suurust või värvi või laadi fondifail alla.

Miks seda kasutatakse

Aa

Leia fondi nimi

Leidsid pealkirja, mis sulle meeldib? Vali see ja vaata perekonda, paksust ning fondi allikat: Google Fonts, Adobe Fonts või veebisait ise.

{ }

Võrdle maketiga

Võrdle veebilehe väärtusi kujundusfailiga ja kopeeri reeglid CSS-i, SCSS-i, SASS-i või Tailwindi kujul.

4.5:1

Kontrolli kontrasti

Vaata kontrastisuhet ja AA/AAA märgiseid ning proovi enne kujunduse avaldamist tumedamat teksti või heledamat tausta.

Mida see teeb

  • Näidis mõõdujoontega

    Virna esimene perekond kuvatakse cap-height-, x-height- ja baseline-joonte vahel, mis mõõdetakse otse fondist.

  • koodinäite vormingut

    CSS, SCSS, SASS ja Tailwind. Kopeeri kogu koodinäide või üks rida; viimane vorming jäetakse meelde.

  • Sinu ühikud

    Kuva suurus väljal ja koodinäites ühikutes px, rem, pt või em. rem lähtub lehe juursuurusest.

  • Fondi allikas

    Märgis näitab, kust font pärineb: Google Fonts, Adobe Fonts, sinu server või arvutisse paigaldatud süsteemifont.

  • Kontrasti kontroll

    Teksti ja tausta suhe AA ja AAA märgistega tavalise ning suure teksti jaoks. Värvi muutmisel väärtus uueneb.

  • Laadi font alla

    Laeb faili @font-face allikast ja nimetab selle perekonna järgi. Kui server blokeerib allalaadimise, avaneb allikas uuel vahelehel.

Miks on fondi leidmine DevToolsis nii aeganõudev?

Leht määrab fontide loendi ja brauser kasutab esimest saadaolevat fonti. Selle leidmiseks ava DevTools, leia element, vaata Computed-paneeli ja otsi seejärel Network-paneelist fondifaili. Suurus, paksus, reavahe ja värv asuvad eri kohtades.

FontLens loeb valitud teksti arvutatud stiili ja koondab ühte paneeli fondiperekonnad, esimese näidise, väärtused, fondi allika ja CSS-i. See loeb lehe CSS-i ega saa seetõttu pildil olevat fonti tuvastada.

Midagi ei lahku sinu brauserist

  • Konto ja serveriteta

    FontLens töötab sinu brauseris. Analüütikat ega jälgimist pole.

  • Loeb sinu valitud teksti

    Inspektor loeb paremklõpsatud teksti stiile. Lehe kohta ei saadeta midagi kuhugi.

  • Neli luba

    Paremklõpsu menüü jaoks kontekstimenüü luba, aktiivse vahelehe ja lehe ligipääs inspektori avamiseks ning salvestus näidisteksti, ühiku ja koodivormingu jaoks.

Chrome DevTools ja FontLens

Chrome DevTools ja FontLensChrome DevToolsFontLens
Leia teksti fontInspekteeri, leia element ja ava Computed-paneelVali tekst, paremklõpsa, vali üks menüüvalik
Kopeeri Tailwindi või SCSS-i kujulEi, väärtused tuleb ükshaaval kopeeridaCSS-i, SCSS-i, SASS-i või Tailwindi vahekaart
Fondi allikasOtsi fondifaili Network-paneelistMärgis: Google Fonts, Adobe Fonts, oma server või süsteem
Laadi fondifail allaLeia fail Network- või Sources-paneelilt ja salvestaÜks nupp
Kontrasti kontrollStyles-paneeli värvivalijasAA ja AAA märgised reaalajas eelvaate kõrval
HindSisseehitatudTasuta

Küsimused

Kuidas teada saada, millist fonti veebisait kasutab?

Lisa FontLens Chrome’i, vali saidil tekst, tee paremklõps ja vali „Inspect font with FontLens”. Näed fondiperekonda, suurust, paksust, reavahet, värvi ja fondi allikat.

Kuidas veebisaidilt fondi CSS-i kopeerida?

Vali inspektoris CSS-i, SCSS-i, SASS-i või Tailwindi vahekaart ja vajuta „Copy all” või kopeeri üks rida. Vajaduse korral vali enne ühikuks px, rem, pt või em.

Kas saan veebisaidilt fondi alla laadida?

Kui tekst kasutab veebifonti, laeb „Download font” faili @font-face allikast. Süsteemifondil pole allalaaditavat faili. Enne oma projektis kasutamist kontrolli litsentsi.

Kas FontLens tuvastab pildil või PDF-is oleva fondi?

Ei. See loeb veebilehtede päris teksti CSS-i ega tuvasta fonti piltidel, canvas-elementides ega PDF-ides.

Kuidas kontrollida teksti kontrasti WCAG-i järgi?

Eelvaade näitab teksti ja tausta kontrastisuhet ning AA ja AAA märgiseid tavalise ja suure teksti jaoks. Muuda kumbagi värvi ja märgised uuenevad.

Kas suurusi saab näidata px-i asemel rem-ühikus?

Jah. Vali ühikuks px, rem, pt või em ning väljad ja koodinäide uuenevad. rem arvutatakse lehe juurfondiväärtuse järgi ja sinu valik jäetakse meelde.

Kas see on tasuta? Kas see kogub andmeid?

See on tasuta ja kontot pole vaja. Servereid ega analüütikat pole; ainus võrgupäring käivitub sinu algatatud fondi allalaadimisel.

Kas see töötab Edge'is, Brave'is või Operas?

Enamik Chromiumi brausereid installib laiendusi Chrome Web Store'ist, sealhulgas Edge, Brave, Opera ja Vivaldi. Firefox ja Safari ei ole toetatud.

Veel tasuta laiendusi PYROCTALilt

Mis font see on? Kaks klõpsu.

Lisa Chrome’i — tasuta