FontLens

Extensie gratuită pentru Chrome

Ce font este acesta? Dă clic dreapta și vezi CSS-ul

Selectează textul de pe orice site, dă clic dreapta și alege „Inspect font with FontLens”. Inspectorul se deschide peste pagină și afișează familia, dimensiunea, grosimea, înălțimea liniei și culoarea, cu CSS-ul gata de copiat și un buton „Download font”.

Adaugă în Chrome — gratis

Funcționează și în Edge, Brave, Opera și alte browsere bazate pe Chromium.

Inspectorul FontLens: mostra Ag între reperele cap-height, x-height și baseline, proprietățile fontului și un fragment Tailwind

Pe scurt

Ce face
Afișează fontul textului selectat: familia, dimensiunea, grosimea, înălțimea liniei, culoarea și stilurile care diferă de valorile implicite, cu CSS-ul gata de copiat.
Cum începi
Selectează textul, dă clic dreapta și alege „Inspect font with FontLens”. Opțiunea din meniu apare numai când ai selectat text.
Copiază ca
CSS, SCSS, SASS sau Tailwind, cu dimensiunea în px, rem, pt sau em.
Fișierul fontului
„Download font” preia fontul web din sursa @font-face. Verifică licența fontului înainte să îl folosești.
Pentru cine
Designeri web, dezvoltatori front-end, auditori de accesibilitate și studenți care învață CSS.
Preț
Gratuit. Fără cont și fără versiune cu plată.
Date
Rulează în browserul tău. Fără servere și fără analiză. Singura cerere este descărcarea de font pe care o pornești.
Funcționează în
Chrome și alte browsere Chromium care instalează din Chrome Web Store. Nu funcționează în Firefox sau Safari.
Limite
Citește CSS-ul textului real de pe pagini web. Nu detectează textul din imagini, canvasuri sau PDF-uri și nici de pe paginile Chrome.
Versiune
2.2.0, actualizată 23 octombrie 2026

Două clicuri până la font

  1. 1

    Selectează textul

    Un titlu, un paragraf sau eticheta unui buton de pe orice pagină web.

  2. 2

    Dă clic dreapta

    Alege „Inspect font with FontLens”. Inspectorul se deschide peste pagină și afișează familia, dimensiunea, grosimea, înălțimea liniei și culoarea.

  3. 3

    Copiază sau ajustează

    Copiază CSS sau Tailwind, încearcă altă dimensiune ori culoare în previzualizarea live sau descarcă fișierul fontului.

De ce îl folosesc

Aa

Află numele fontului

Ți-a plăcut un titlu? Selectează-l și vezi familia, grosimea și sursa fontului: Google Fonts, Adobe Fonts sau chiar site-ul.

{ }

Potrivește macheta

Compară valorile de pe pagina live cu fișierul de design, apoi copiază regulile ca CSS, SCSS, SASS sau Tailwind.

4.5:1

Verifică contrastul

Vezi raportul de contrast și marcajele AA și AAA, apoi încearcă un text mai închis sau un fundal mai deschis înainte de publicarea designului.

Ce face

  • Mostră cu repere

    Prima familie din stivă, afișată între reperele cap-height, x-height și baseline măsurate chiar din font.

  • formate de fragment

    CSS, SCSS, SASS și Tailwind. Copiază fragmentul întreg sau o singură linie; ultimul format folosit este memorat.

  • Unitățile tale

    Afișează dimensiunea în px, rem, pt sau em în câmpuri și în fragment. rem urmează dimensiunea rădăcină a paginii.

  • Sursa fontului

    Un indicator arată de unde provine fontul: Google Fonts, Adobe Fonts, găzduire proprie sau un font de sistem instalat pe calculator.

  • Verifică contrastul

    Raportul dintre text și fundal, cu marcaje AA și AAA pentru text normal și mare; se actualizează când schimbi culorile.

  • Descarcă fontul

    Preia fișierul din sursa @font-face și îl numește după familie. Dacă serverul blochează descărcarea, sursa se deschide într-o filă nouă.

De ce durează atât să afli „ce font este?” în DevTools

O pagină declară o listă de fonturi, iar browserul îl folosește pe primul disponibil. Ca să afli care este, deschizi DevTools, găsești elementul, citești panoul Computed, apoi cauți fișierul în Network. Dimensiunea, grosimea, înălțimea liniei și culoarea sunt în locuri diferite.

FontLens citește stilul calculat al textului selectat și îl afișează într-un singur panou: stiva de familii, mostra primei familii, valorile, sursa fontului și CSS-ul. Citește CSS-ul paginii, deci nu poate identifica fonturi din imagini.

Nimic nu părăsește browserul

  • Fără cont și fără servere

    FontLens rulează în browserul tău. Fără analiză și fără urmărire.

  • Citește ce selectezi

    Inspectorul citește stilurile textului pe care ai dat clic dreapta. Nicio informație despre pagină nu este trimisă nicăieri.

  • Patru permisiuni

    Meniu contextual pentru opțiunea de clic dreapta, acces la fila activă și la pagină pentru deschiderea inspectorului, plus stocare pentru textul de probă, unitate și formatul fragmentului.

Chrome DevTools comparat cu FontLens

Chrome DevTools comparat cu FontLensChrome DevToolsFontLens
Află fontul unui textInspectează, găsește elementul, deschide panoul ComputedSelectează textul, clic dreapta, o opțiune în meniu
Copiază ca Tailwind sau SCSSNu, valorile se copiază una câte unaFila CSS, SCSS, SASS sau Tailwind
Sursa fontuluiCaută fișierul fontului în panoul NetworkIndicator: Google Fonts, Adobe Fonts, găzduit local sau sistem
Descarcă fișierul fontuluiGăsește-l în Network sau Sources și salvează-lUn singur buton
Verifică contrastulÎn selectorul de culoare din panoul StylesMarcaje AA și AAA lângă previzualizarea live
PrețInclusGratuit

Întrebări

Cum aflu ce font folosește un site?

Adaugă FontLens în Chrome, selectează un text de pe site, dă clic dreapta și alege „Inspect font with FontLens”. Vezi familia fontului, dimensiunea, grosimea, înălțimea liniei, culoarea și sursa fontului.

Cum copiez CSS-ul unui font de pe un site?

În inspector, alege fila CSS, SCSS, SASS sau Tailwind și apasă „Copy all” ori copiază o singură linie. Dacă ai nevoie, schimbă mai întâi unitatea în px, rem, pt sau em.

Pot descărca un font de pe un site?

Dacă textul folosește un font web, „Download font” preia fișierul din sursa @font-face. Fonturile de sistem nu au fișier de descărcat. Verifică licența înainte să folosești fontul în proiectul tău.

Poate FontLens identifica un font dintr-o imagine sau dintr-un PDF?

Nu. Citește CSS-ul textului real de pe pagini web, deci nu poate identifica fonturi din imagini, canvasuri sau PDF-uri.

Cum verific contrastul textului pentru WCAG?

Previzualizarea arată raportul de contrast dintre culoarea textului și fundal, cu marcaje AA și AAA pentru text normal și mare. Schimbă oricare culoare, iar marcajele se actualizează.

Poate afișa dimensiunile în rem în loc de px?

Da. Schimbă unitatea în px, rem, pt sau em, iar câmpurile și fragmentul se actualizează. rem se calculează din dimensiunea rădăcină a paginii, iar alegerea ta este memorată.

Este gratuit? Colectează date?

Este gratuit și nu necesită cont. Nu are servere sau analiză; singura cerere este descărcarea de font pe care o pornești.

Funcționează în Edge, Brave sau Opera?

Majoritatea browserelor Chromium instalează extensii din Chrome Web Store, inclusiv Edge, Brave, Opera și Vivaldi. Firefox și Safari nu sunt suportate.

Mai multe extensii gratuite de la PYROCTAL

Ce font este acesta? Două clicuri.

Adaugă în Chrome — gratuit