FontLens

Izberite besedilo, kliknite z desno tipko, in takoj preverite pisavo, velikost, debelino, barvo in CSS — kopirajte, prilagodite,…

Ste kdaj pristali na strani, občudovali napis in se vprašali "kakšna je to pisava?" FontLens odgovori na to vprašanje z enim samim klikom. Izberite poljubno besedilo na katerem koli spletnem mestu, z desnim klikom in izberite "Preglej pisavo s FontLensom". Čista, osredotočena plošča se odpre neposredno nad stranjo in razkrije, kako je to besedilo oblikovano: tip pisave, njena velikost, teža, višina vrstice, barva in vse druge podrobnosti za oblikovanjem. Ne glede na to, ali ste oblikovalec, ki obratno inženira postavitev, razvijalec, ki usklajuje specifikacije, ali preprosto radovedni glede čudovitega naslova, to orodje vsako spletno stran spremeni v odprto knjigo tipografije. FontLens je iskalnik pisav in CSS inšpektor v enem. Ne samo poimenuje družino pisav, ampak vam ponudi pripravljeno kodo, interaktivno igrišče za preizkušanje idej in orodja za dostopnost, da zagotovite, da je vaše besedilo berljivo. Brez računa. Brez prijave. Samo izberite, z desnim klikom in preglejte. 🔍 Kaj lahko storite - Razkrijte celotno tipografijo katere koli izbrane besede: družina pisav, velikost pisave, teža pisave, višina vrstice in barva na prvi pogled - Oglejte si dodatne sloge, ki jih je enostavno spregledati, kot so razmik med črkami, pretvorba besedila in slog pisave - Kopirajte katero koli posamezno lastnost z enim klikom ali zgrabite celoten nabor pravil kot celoten CSS izrezek - Prevedite ta izrezek v Tailwind, SCSS ali SASS prek preprostih zavihkov, nato kopirajte celotno ali vrstico po vrstico - Eksperimentirajte v predogledu v živo, ki ga je mogoče urejati: prepišite vzorčne besede, prilagodite vrednosti, zamenjajte ozadje in opazujte, kako se takoj posodobi - Prepoznajte, od kod prihaja spletna pisava, z značko ponudnika (Google Fonts, Adobe Fonts, samostojno gostujoča ali vgrajena sistemska pisava) - Shrani spletno pisavo v računalnik z gumbom "Prenesi pisavo", povzeto neposredno iz lastnega vira - Preverite barvni kontrast glede na standarde WCAG, z natančnim razmerjem plus rezultati uspeha ali neuspeha AA in AAA - Izberite in vzorčite barve z izbirnikom barv, vključno s kapalko za zajemanje katerega koli piksla na zaslonu - Preklapljajte merske enote med px, rem, pt in em, uporabljene tako za polja kot za izvoženo kodo 🖱️ Kako deluje Uporaba FontLensa traja nekaj sekund. Označite besede, ki jih želite preučiti, z desnim klikom na izbiro in v meniju izberite "Preglej pisavo s FontLensom". Plošča se prikaže nad trenutno stranjo, lepo oblikovana, tako da se nikoli ne spopade z videzom spletnega mesta. Od tam lahko preberete podrobnosti, kopirate, kar potrebujete, ali začnete urejati. Predogled v živo je tam, kjer postanejo stvari zabavne. Spremenite besedilo, da preizkusite pravi naslov, premaknite velikost, prilagodite težo ali nastavite novo barvo ozadja, da vidite, kako se pisava obdrži. Vaše spremembe ostanejo, ko se premikate med stranmi in se vrnete pozneje, tako da vas ideja, ki ste jo začeli na enem spletnem mestu, čaka na naslednjem. Ko želite nazaj prvotne vrednosti, gumb "Ponastavi na spletno mesto" obnovi vse, kar stran dejansko uporablja. Potrebujete surov vir? Za prenosljivo spletno pisavo en gumb pridobi dejansko datoteko iz lokacije @font-face. Za pisavo, ki je že priložena vašemu operacijskemu sistemu, vam FontLens pove, da je to vgrajena pisava, tako da veste, da je na voljo brez prenosa. 🔒 Zasebnost na prvem mestu FontLens deluje popolnoma znotraj vašega brskalnika. Ni zbiranja podatkov, sledenja, analitike in nobenih zunanjih strežnikov, vključenih v pregledovanje besedila. Vse, kar preučite, ostane na vašem računalniku. Razširitev izvede natanko eno omrežno zahtevo, in to le, ko namerno pritisnete "Prenesi pisavo", takrat pa vzpostavi stik z virom te pisave za pridobitev datoteke. Nič drugega ne zapusti vaše naprave. Dovoljenja so namerno ozka. Dovoljenje za kontekstni meni doda vnos z desnim klikom. Dovoljenje za aktivni zavihek omogoča orodju branje besedila, ki ste ga izbrali na zavihku, kjer ga prikličete, in nikjer drugje. Pomnilnik ohranja vaše besedilo predogleda ter vaše enote in formatne preference, tako da si jih zapomnite naslednjič. Ni širokega dostopa do vaše zgodovine brskanja in niti obsežnih dovoljenj gostitelja. 👥 Komu je namenjeno - Spletni oblikovalci, ki želijo prepoznati pisavo, zajeti paleto in hitro ponovno uporabiti sloge - Front-end razvijalci, ki ujemajo maketo ali prenašajo točne vrednosti družine pisav in razmikov v kodo - Inženirji uporabniškega vmesnika in uporabniške izkušnje, ki gradijo dosledne, za blagovno znamko značilne sisteme pisav - Študenti, ki se učijo CSS in tipografijo in želijo videti, kako so zgrajena resnična spletna mesta - Revizorji dostopnosti, ki preverjajo, ali besedilo izpolnjuje zahteve WCAG glede kontrasta pred objavo - Blogerji, tržniki in radovedni bralci, ki preprosto želijo vedeti, katero pisavo uporablja spletno mesto ✨ Zakaj si ga ljudje shranijo - En desni klik vam da odgovor, namesto da brskate po orodjih za razvijalce - Koda je pripravljena za kopiranje v čistem CSS-u, Tailwindu, SCSS-u ali SASS-u, tako da jo lahko neposredno vstavite v svoj projekt - Predogled, ki ga je mogoče urejati, vam omogoča prototipiranje izbire pisav, ne da bi se dotaknili ene same vrstice kode - Preverjevalnik kontrasta vgradi dostopnost v vaš potek dela, namesto da bi jo pustil za konec - Izbirnik barv in kapalka pomenita, da lahko vzorčite in ponovno uporabite točne barve iz katerega koli dela strani - Svetle in temne teme samodejno sledijo vašemu operacijskemu sistemu, tako da se počutite domače podnevi ali ponoči - Preklapljanje enot med px, rem, pt in em ohranja izhod usklajen s tem, kako je zapisana vaša koda 🎨 Podrobnejši pregled Tipografija je več kot le ime. FontLens prikazuje majhne odločitve, zaradi katerih se besedilo zdi pravilno, od teže naslova do prostora za dihanje v višini vrstice in subtilnega razmika med črkami. Opazovanje teh vrednosti eno ob drugi vam pomaga razumeti, zakaj oblikovanje deluje in kako ga ponovno ustvariti. Značka ponudnika prav tako doda kontekst, saj vam na prvi pogled pove, ali gledate vir Google Fonts, obraz Adobe Fonts, samostojno gostujočo datoteko ali sistemsko privzeto, kar je pogosto prvi namig, ko se lotite ujemanja ali iskanja pisave. Barvna orodja presegajo statični prikaz. Izbirnik ponuja HSV kvadrat z drsniki za odtenek in alfa, in govori HEX, RGB in HSL, tako da lahko delate v poljubnem formatu, ki vam ustreza. To združite s kapalko in lahko zajamete natančen odtenek katerega koli elementa in ga spustite v predogled ali v svoje zapiske. 🚀 Začnite pregledujem Dodajte FontLens, označite nekaj besed in z desnim klikom razkrijte tipografijo, sloge in barve za katero koli stran. Je hiter, zaseben in resnično uporaben spremljevalec za vsakogar, ki mu je mar, kako se bere splet. Namestite ga, imejte ga pri roki in nikoli več se ne sprašujte o skrivnostni pisavi.