FontLens

Odaberite bilo koji tekst, kliknite desnom tipkom i odmah provjerite font, veličinu, težinu, boju i CSS – kopirajte, prilagodite,…

Jeste li ikada sletjeli na stranicu, divili se slovima i pitali se "koji je ovo font?" FontLens odgovara na to pitanje jednim klikom. Odaberite bilo koji tekst na bilo kojoj web stranici, desnom tipkom miša kliknite i odaberite "Inspekcija fonta s FontLensom." Čist, fokusiran panel otvara se točno iznad stranice i otkriva kako je taj tekst stiliziran: vrsta pisma, njegova veličina, debljina, visina linije, boja i svaki drugi detalj iza dizajna. Bilo da ste dizajner koji obrnuto projektira izgled, programer koji usklađuje specifikaciju ili jednostavno znatiželjni o prekrasnom naslovu, ovaj alat pretvara bilo koju web stranicu u otvorenu knjigu tipografije. FontLens je pronalazač fontova i CSS inspektor u jednom. Ne samo da vam imenuje obitelj fontova, već vam daje gotov kod, interaktivno igralište za testiranje ideja i alate za pristupačnost kako biste bili sigurni da je vaš tekst čitljiv. Nema računa. Nema prijave. Samo odaberite, desnom tipkom miša kliknite i pregledajte. 🔍 Što možete učiniti - Otkrijte potpunu tipografiju bilo koje odabrane riječi: obitelj fontova, veličinu fonta, debljinu fonta, visinu linije i boju na prvi pogled - Pogledajte dodatni stil koji je lako propustiti, kao što su razmak između slova, transformacija teksta i stil fonta - Kopirajte bilo koje pojedinačno svojstvo jednim klikom ili zgrabite cijeli skup pravila kao kompletan CSS isječak - Pretvorite taj isječak u Tailwind, SCSS ili SASS putem jednostavnih kartica, zatim kopirajte cijeli ili red po red - Eksperimentirajte u pregledu uživo, koji se može uređivati: prepišite uzorke riječi, podesite vrijednosti, zamijenite pozadinu i gledajte kako se odmah ažurira - Identificirajte odakle dolazi web font s oznakom pružatelja (Google Fontovi, Adobe Fontovi, samostalno hostirani ili ugrađena sistemska vrsta pisma) - Spremite web font na svoje računalo gumbom "Preuzmi font", povučenim izravno iz vlastitog izvora - Provjerite kontrast boja prema WCAG standardima, s točnim omjerom plus AA i AAA rezultate prolaska ili neuspjeha - Odaberite i uzorkujte boje s potpunim odabiračem, uključujući kapaljku za hvatanje bilo kojeg piksela na zaslonu - Prebacite mjernu jedinicu između px, rem, pt i em, primijenjeno na polja i izvezeni kod 🖱️ Kako to funkcionira Korištenje FontLensa traje nekoliko sekundi. Označite riječi koje želite proučavati, desnom tipkom miša kliknite na odabir i odaberite "Inspekcija fonta s FontLensom" iz izbornika. Panel se pojavljuje preko trenutne stranice, uredno stiliziran tako da se nikada ne sudara s izgledom same stranice. Odatle možete pročitati detalje, kopirati što vam treba ili započeti s uređivanjem. Pregled uživo je mjesto gdje stvari postaju zabavne. Promijenite tekst da biste testirali stvarni naslov, prilagodite veličinu, podesite debljinu ili postavite novu boju pozadine kako biste vidjeli kako se vrsta slova drži. Vaše se izmjene zadržavaju dok se krećete između stranica i vraćate se kasnije, tako da ideja koju ste započeli na jednoj stranici čeka vas na sljedećoj. Kada želite vratiti izvorne vrijednosti, gumb "Vrati na stranicu" vraća sve što stranica zapravo koristi. Trebate izvorni izvor? Za web font koji se može preuzeti, jedan gumb dohvaća stvarnu datoteku s @font-face lokacije. Za vrstu pisma koja se već isporučuje s vašim operativnim sustavom, FontLens vam govori da je to ugrađeni font, tako da znate da je dostupan bez ikakvog preuzimanja. 🔒 Privatnost na prvom mjestu FontLens radi u potpunosti unutar vašeg preglednika. Nema prikupljanja podataka, nema praćenja, nema analitike i nema vanjskih poslužitelja uključenih u pregled teksta. Sve što pregledate ostaje na vašem računalu. Proširenje čini točno jedan mrežni zahtjev, i to samo kada namjerno pritisnete "Preuzmi font", u tom trenutku ono pristupa izvoru tog fonta kako bi dohvatilo datoteku. Ništa drugo ne napušta vaš uređaj. Dozvole su namjerno uske. Dozvola za kontekstni izbornik dodaje unos desnim klikom. Dozvola za aktivnu karticu omogućuje alatu čitanje teksta koji ste odabrali na kartici gdje ga pozivate, i nigdje drugdje. Pohrana zadržava vaš tekst pretpregleda i vaše postavke jedinica i formata tako da se pamte sljedeći put. Nema širokog pristupa vašoj povijesti pregledavanja i nema opsežnih dozvola hosta. 👥 Za koga je namijenjen - Web dizajneri koji žele identificirati vrstu pisma, uhvatiti paletu i brzo ponovno koristiti stilove - Prednji programeri koji usklađuju mockup ili prenose točne vrijednosti obitelji fontova i razmaka u kod - UI i UX inženjeri koji grade dosljedne, brendirane sustave tipova - Studenti koji uče CSS i tipografiju i žele vidjeti kako se stvaraju stvarne stranice - Revizori pristupačnosti koji provjeravaju da tekst zadovoljava WCAG zahtjeve kontrasta prije objavljivanja - Blogeri, marketinški stručnjaci i znatiželjni čitatelji koji jednostavno žele znati koji font stranica koristi ✨ Zašto ga ljudi zadržavaju - Jedan desni klik daje vam odgovor umjesto kopanja po developerskim alatima - Kod je spreman za kopiranje u običnom CSS-u, Tailwindu, SCSS-u ili SASS-u, tako da se izravno uklapa u vaš projekt - Uređivani pregled omogućuje vam prototipiranje izbora vrsta pisma bez dodirivanja ijedne linije koda - Provjera kontrasta ugrađuje pristupačnost u vaš tijek rada, a ne ostavlja je kao naknadnu misao - Odabirač boja i kapaljka znače da možete uzorkovati i ponovno koristiti točne boje s bilo kojeg mjesta na stranici - Svijetle i tamne teme automatski prate vaš operativni sustav, tako da se osjeća ugodno danju i noću - Prebacivanje jedinica između px, rem, pt i em održava izlaz usklađenim s načinom na koji je vaša baza koda napisana 🎨 Detaljniji pogled na detalje Tipografija je više od imena. FontLens prikazuje male odluke koje čine da tekst izgleda dobro, od težine naslova do prostora u visini linije i suptilnog razmaka između slova. Gledanje tih vrijednosti jednu uz drugu pomaže vam razumjeti zašto dizajn funkcionira i kako ga ponovno stvoriti. Oznaka pružatelja također dodaje kontekst, dajući vam na prvi pogled je li riječ o Google Fonts resursu, Adobe Fonts pismu, samostalnoj datoteci ili zadanoj sistemskoj, što je često prvi trag kada se spremate uskladiti ili pronaći vrstu pisma. Alati za boje idu dalje od statičnog očitavanja. Odabirač nudi HSV kvadrat s klizačima za nijansu i prozirnost, te razumije HEX, RGB i HSL tako da možete raditi u formatu koji vam odgovara. Upotrijebite to s kapaljkom i možete preciznu nijansu bilo kojeg elementa uzeti i ubaciti u svoj pregled ili bilješke. 🚀 Počnite s pregledom Dodajte FontLens, označite neke riječi i desnom tipkom miša kliknite da biste otkrili tipografiju, stilove i boje iza bilo koje stranice. To je brz, privatan i iskreno koristan pratilac za svakoga tko brine o tome kako se web čita. Instalirajte ga, držite ga pri ruci i nikad se više ne pitajte o tajanstvenom fontu.