FontLens

Ingyenes bővítmény Chrome-hoz

Milyen betűtípus ez? Kattints jobb gombbal, és nézd meg a CSS-t

Jelölj ki szöveget bármely weboldalon, kattints jobb gombbal, majd válaszd az „Inspect font with FontLens” menüpontot. Az oldalon megnyílik az inspektor a betűcsaláddal, mérettel, vastagsággal, sormagassággal és színnel, másolható CSS-sel és „Download font” gombbal.

Hozzáadás a Chrome-hoz — ingyenes

Működik Edge, Brave, Opera és más Chromium böngészőkben is.

A FontLens inspektora: az Ag minta cap-height, x-height és baseline vonalak között, a betűtulajdonságok és egy Tailwind-kódrészlet

Röviden

Mire képes
Megmutatja a kijelölt szöveg betűtípusát: család, méret, vastagság, sormagasság, szín és az alapértéktől eltérő stílusok, másolásra kész CSS-sel.
Kezdés
Jelölj ki szöveget, kattints jobb gombbal, majd válaszd az „Inspect font with FontLens” menüpontot. Csak kijelölt szövegnél jelenik meg.
Másolás formátuma
CSS, SCSS, SASS vagy Tailwind, a méret px, rem, pt vagy em egységben.
Betűfájl
A „Download font” az @font-face forrásból tölti le a webes betűtípust. Használat előtt ellenőrizd a licencet.
Kinek készült
Webdesignereknek, front-end fejlesztőknek, akadálymentességi auditoroknak és CSS-t tanuló diákoknak.
Ár
Ingyenes. Nincs fiók és fizetős verzió.
Adatok
A böngésződben fut. Nincsenek szerverek vagy analitika. Csak az általad elindított betűtípus-letöltés küld kérést.
Működik itt
Chrome-ban és más, Chrome Web Store-ból telepítő Chromium böngészőkben. Firefox és Safari alatt nem.
Korlátok
A weboldalakon megjelenő valódi szöveg CSS-ét olvassa. Képek, canvasok, PDF-ek és a Chrome saját oldalainak szövegét nem.
Verzió
2.2.0, frissítve: 2026. október 23.

Két kattintás a betűtípusig

  1. 1

    Szöveg kijelölése

    Bármely weboldal címsora, bekezdése vagy gombfelirata.

  2. 2

    Kattints jobb gombbal

    Válaszd az „Inspect font with FontLens” menüpontot. Az oldalon megnyílik az inspektor a családdal, mérettel, vastagsággal, sormagassággal és színnel.

  3. 3

    Másold vagy finomítsd

    Másold a CSS-t vagy Tailwindet, próbálj ki más méretet vagy színt az élő előnézetben, vagy töltsd le a betűfájlt.

Miért használják

Aa

Betűtípus azonosítása

Megtetszett egy címsor? Jelöld ki, és nézd meg a családját, vastagságát, valamint a forrását: Google Fonts, Adobe Fonts vagy maga a webhely.

{ }

Terv összevetése

Hasonlítsd össze az élő oldal értékeit a tervfájllal, majd másold a szabályokat CSS, SCSS, SASS vagy Tailwind formátumban.

4.5:1

Kontraszt ellenőrzése

Nézd meg a kontrasztarányt és az AA, AAA jelöléseket, majd próbálj sötétebb szöveget vagy világosabb hátteret a terv élesítése előtt.

Mire képes

  • Minta segédvonalakkal

    A verem első családja a betűből mért cap-height, x-height és baseline segédvonalak között jelenik meg.

  • kódrészlet-formátum

    CSS, SCSS, SASS és Tailwind. Másold a teljes kódrészletet vagy egyetlen sort; az utoljára használt formátum megmarad.

  • Mértékegységek

    A méret px, rem, pt vagy em egységben jelenik meg a mezőkben és a kódrészletben. A rem az oldal gyökérméretét követi.

  • Betűtípus forrása

    Jelvény mutatja a forrást: Google Fonts, Adobe Fonts, saját tárhely vagy a számítógépre telepített rendszerbetűtípus.

  • Kontrasztvizsgálat

    A szöveg és a háttér aránya AA és AAA jelöléssel normál és nagy szöveghez; színváltáskor frissül.

  • Betűtípus letöltése

    A fájlt az @font-face forrásból tölti le, a család neve alapján elnevezve. Ha a szerver blokkolja, új lapon nyitja meg a forrást.

Miért nehéz DevToolsban betűtípust keresni?

Az oldal betűtípusok listáját adja meg, a böngésző pedig az első elérhetőt használja. Hogy megtudd, melyik az, megnyitod a DevTools-t, megkeresed az elemet, elolvasod a Computed panelt, majd a Network panelen kutatsz a fájl után. A méret, vastagság, sormagasság és szín külön helyen található.

A FontLens beolvassa a kijelölt szöveg kiszámított stílusát, és egyetlen panelen mutatja a családokat, az első család mintáját, az értékeket, a forrást és a CSS-t. Az oldal CSS-ét olvassa, ezért képen belüli betűtípust nem tud megnevezni.

Semmi sem hagyja el a böngésződet

  • Nincs fiók, nincsenek szerverek

    A FontLens a böngésződben fut. Nincs analitika és követés.

  • A kijelölt szöveget olvassa

    Az inspektor a jobb gombbal kiválasztott szöveg stílusait olvassa. Az oldalról semmi nem kerül továbbításra.

  • Négy engedély

    Helyi menü a jobb kattintásos elemhez, aktív lap- és oldalhozzáférés az inspektor megnyitásához, valamint tárhely a mintaszöveghez, mértékegységhez és kódrészlet-formátumhoz.

Chrome DevTools és FontLens

Chrome DevTools és FontLensChrome DevToolsFontLens
Szöveg betűtípusának megkereséseVizsgálat, elemkeresés, Computed panel megnyitásaSzöveg kijelölése, jobb kattintás, egy menüpont
Másolás Tailwindként vagy SCSS-kéntNem, az értékeket egyesével kell másolniCSS, SCSS, SASS vagy Tailwind lap
A betűtípus forrásaA betűfájl keresése a Network panelenJelvény: Google Fonts, Adobe Fonts, saját tárhely vagy rendszer
Betűfájl letöltéseKeresd meg a Network vagy Sources panelen, és mentsd elEgy gomb
Kontraszt ellenőrzéseA Styles panel színválasztójábanAA és AAA jelölés az élő előnézet mellett
ÁrBeépítettIngyenes

Kérdések

Hogyan tudom meg, milyen betűtípust használ egy weboldal?

Add hozzá a FontLenst a Chrome-hoz, jelölj ki szöveget az oldalon, kattints jobb gombbal, majd válaszd az „Inspect font with FontLens” lehetőséget. Látod a betűcsaládot, méretet, vastagságot, sormagasságot, színt és a forrást.

Hogyan másolhatom ki egy weboldal betűtípusának CSS-ét?

Az inspektorban válaszd a CSS, SCSS, SASS vagy Tailwind lapot, majd nyomd meg a „Copy all” gombot, vagy másolj ki egy sort. Ha kell, előbb válts px, rem, pt vagy em egységre.

Letölthetek betűtípust egy weboldalról?

Ha a szöveg webes betűtípust használ, a „Download font” gomb az @font-face forrásból tölti le a fájlt. A rendszerbetűtípus nem tölthető le. Ellenőrizd a licencet, mielőtt a saját projektedben használod.

Fel tud ismerni a FontLens képen vagy PDF-ben lévő betűtípust?

Nem. A weboldalak valódi szövegének CSS-ét olvassa, így képekben, canvasokban és PDF-ekben nem tud betűtípust azonosítani.

Hogyan ellenőrizhetem a szöveg kontrasztját WCAG szerint?

Az előnézet a szövegszín és a háttér kontrasztarányát mutatja AA és AAA jelöléssel normál és nagy szöveghez. Bármelyik színt módosítod, a jelölések frissülnek.

Megjelenítheti a méreteket rem-ben px helyett?

Igen. Válts px, rem, pt vagy em egységre, és a mezők, valamint a kódrészlet követi. A rem az oldal gyökér-betűméretéből számolódik, a választásod pedig megmarad.

Ingyenes? Gyűjt adatokat?

Ingyenes, fiók nélkül. Nincsenek szerverei és analitikája; csak az általad elindított betűtípus-letöltés küld kérést.

Működik Edge, Brave vagy Opera böngészőkben?

A legtöbb Chromium böngésző telepít bővítményeket a Chrome Web Store-ból, ilyenek az Edge, Brave, Opera és Vivaldi. A Firefox és a Safari nem támogatott.

További ingyenes bővítmények a PYROCTAL-tól

Milyen betűtípus ez? Két kattintás.

Hozzáadás a Chrome-hoz — ingyenes