FontLens

Selectează orice text, dă clic dreapta și inspectează instantaneu fontul, dimensiunea, greutatea, culoarea și CSS-ul — copiază,…

Ați nimerit vreodată pe o pagină, ați admirat literele și v-ați întrebat "ce font este acesta?" FontLens răspunde la această întrebare cu un singur clic. Selectați orice text de pe orice site web, faceți clic dreapta și alegeți "Inspectează fontul cu FontLens". Un panou curat și concentrat se deschide chiar deasupra paginii și dezvăluie exact cum este stilat textul respectiv: tipul de font, dimensiunea, greutatea, înălțimea liniei, culoarea și fiecare alt detaliu din spatele designului. Indiferent dacă sunteți un designer care re-ingineriază un layout, un dezvoltator care potrivește o specificație sau pur și simplu curios despre un titlu frumos, acest instrument transformă orice pagină web într-o carte deschisă de tipografie. FontLens este un căutător de fonturi și un inspector CSS, toate într-unul singur. Nu doar că vă numește familia de fonturi, ci vă oferă cod gata de utilizat, un spațiu de joacă interactiv pentru a testa idei și instrumente de accesibilitate pentru a vă asigura că textul este lizibil. Fără cont. Fără înregistrare. Doar selectați, faceți clic dreapta și examinați. 🔍 Ce puteți face - Dezvăluiți tipografia completă a oricăror cuvinte selectate: familia de fonturi, dimensiunea fontului, greutatea fontului, înălțimea liniei și culoarea dintr-o privire - Vedeți stiluri suplimentare ușor de omis, cum ar fi spațierea literelor, transformarea textului și stilul fontului - Copiați orice proprietate individuală cu un singur clic sau preluați întregul set de reguli ca un fragment CSS complet - Convertiți acel fragment în Tailwind, SCSS sau SASS prin tab-uri simple, apoi copiați integral sau linie cu linie - Experimentați într-o previzualizare live, editabilă: rescrieți cuvintele eșantion, ajustați valorile, schimbați fundalul și urmăriți actualizarea instantanee - Identificați de unde provine un font web cu o insignă a furnizorului (Google Fonts, Adobe Fonts, auto-găzduit sau un font de sistem încorporat) - Salvați un font web pe computer cu butonul "Descarcă fontul", extras direct din sursa proprie - Verificați contrastul culorilor conform standardelor WCAG, cu raportul exact plus rezultatele de trecere sau eșec AA și AAA - Alegeți și prelevați culori cu un selector complet, inclusiv o pipetă pentru a prelua orice pixel de pe ecran - Schimbați unitățile de măsură între px, rem, pt și em, aplicate atât câmpurilor, cât și codului exportat 🖱️ Cum funcționează Utilizarea FontLens durează secunde. Evidențiați cuvintele pe care doriți să le studiați, faceți clic dreapta pe selecție și alegeți "Inspectează fontul cu FontLens" din meniu. Panoul apare deasupra paginii curente, stilizat îngrijit, astfel încât să nu se ciocnească niciodată cu aspectul propriu al site-ului. De acolo puteți citi detaliile, copia ce aveți nevoie sau începe să editați. Previzualizarea live este locul unde lucrurile devin distractive. Schimbați formularea pentru a testa un titlu real, ajustați dimensiunea, greutatea sau setați o nouă culoare de fundal pentru a vedea cum se prezintă tipul. Editările dvs. rămân pe măsură ce navigați între pagini și reveniți mai târziu, astfel încât o idee pe care ați început-o pe un site vă așteaptă pe următorul. Când doriți să reveniți la valorile originale, butonul "Resetează la site" restabilește tot ceea ce utilizează de fapt pagina. Aveți nevoie de resursa brută? Pentru un font web descărcabil, un buton preia fișierul real din locația sa @font-face. Pentru un font care vine deja cu sistemul dvs. de operare, FontLens vă spune că este un font încorporat, astfel încât știți că este disponibil fără nicio descărcare. 🔒 Confidențialitate în primul rând FontLens rulează în întregime în browserul dvs. Nu există colectare de date, urmărire, analize și niciun server extern implicat în inspectarea textului. Tot ce examinați rămâne pe mașina dvs. Extensia face exact o cerere de rețea, și numai când apăsați deliberat "Descarcă fontul", moment în care contactează sursa proprie a acelui font pentru a prelua fișierul. Nimic altceva nu părăsește dispozitivul dvs. Permisiunile sunt în mod deliberat restrânse. Permisiunea meniului contextual adaugă intrarea de clic dreapta. Permisiunea tab-ului activ permite instrumentului să citească textul pe care l-ați selectat pe tab-ul unde îl invocați, și nicăieri altundeva. Stocarea păstrează textul previzualizării și preferințele dvs. de unitate și format, astfel încât să fie reținute data viitoare. Nu există acces larg la istoricul dvs. de navigare și nici permisiuni extinse de gazdă. 👥 Cui se adresează - Designerilor web care doresc să identifice un tip de font, să capteze o paletă și să refolosească stilurile rapid - Dezvoltatorilor front-end care potrivesc un mockup sau preiau valori exacte pentru familia de fonturi și spațiere în cod - Inginerilor UI și UX care construiesc sisteme de tip consistent, în conformitate cu marca - Studenților care învață CSS și tipografie care doresc să vadă cum sunt construite site-urile reale - Auditorilor de accesibilitate care verifică dacă textul îndeplinește cerințele de contrast WCAG înainte de lansare - Bloggerilor, marketerilor și cititorilor curioși care doresc pur și simplu să știe ce font folosește un site ✨ De ce oamenii îl păstrează - Un clic dreapta vă oferă răspunsul în loc să căutați prin instrumentele de dezvoltator - Codul este gata de copiat în CSS simplu, Tailwind, SCSS sau SASS, astfel încât se inserează direct în proiectul dvs. - Previzualizarea editabilă vă permite să prototipizați alegeri de tip fără să atingeți o singură linie de cod - Verificatorul de contrast integrează accesibilitatea în fluxul dvs. de lucru, în loc să o lase ca o idee ulterioară - Selectorul de culori și pipeta înseamnă că puteți eșantiona și refolosi culori exacte de oriunde de pe pagină - Temele deschise și întunecate urmează automat sistemul dvs. de operare, astfel încât se simte ca acasă zi și noapte - Schimbarea unităților între px, rem, pt și em menține rezultatul aliniat cu felul în care este scrisă baza dvs. de cod 🎨 O privire mai atentă asupra detaliilor Tipografia este mai mult decât un nume. FontLens scoate la iveală deciziile mici care fac ca textul să se simtă corect, de la greutatea unui titlu la spațiul de respirație din înălțimea liniei și urmărirea subtilă a spațierii literelor. Vederea acestor valori una lângă alta vă ajută să înțelegeți de ce funcționează un design și cum să-l recreați. Insigna furnizorului adaugă și context, spunându-vă dintr-o privire dacă priviți un activ Google Fonts, un font Adobe Fonts, un fișier auto-găzduit sau o setare implicită de sistem, ceea ce este adesea primul indiciu atunci când încercați să potriviți sau să obțineți un tip de font. Instrumentele de culoare depășesc o citire statică. Selectorul oferă un pătrat HSV cu glisoare pentru nuanță și alfa, și vorbește HEX, RGB și HSL, astfel încât să puteți lucra în formatul care vi se potrivește. Asociați asta cu pipeta și puteți prelua nuanța precisă a oricărui element și o puteți plasa în previzualizarea sau notele dvs. 🚀 începeți să inspectați Adăugați FontLens, evidențiați câteva cuvinte și faceți clic dreapta pentru a dezvălui tipografia, stilurile și culorile din spatele oricărei pagini. Este un companion rapid, privat și cu adevărat util pentru oricine căruia îi pasă de felul în care se citește web-ul. Instalați-l, păstrați-l la îndemână și nu vă veți mai întreba niciodată despre un font misterios.