FontLens

Velg tekst, høyreklikk, og undersøk øyeblikkelig font, størrelse, vekt, farge og CSS – kopier, juster, forhåndsvis og last ned.

Har du noen gang landet på en side, beundret skriften, og lurt på "hva slags font er dette?" FontLens svarer på det spørsmålet med et enkelt klikk. Velg hvilken som helst tekst på en hvilken som helst nettside, høyreklikk, og velg "Inspiser font med FontLens." Et rent, fokusert panel åpnes rett over siden og avslører nøyaktig hvordan teksten er stilformatert: skrifttypen, dens størrelse, vekt, linjehøyde, farge og alle andre detaljer bak designet. Enten du er en designer som baklengsutvikler et layout, en utvikler som matcher en spesifikasjon, eller bare nysgjerrig på en vakker overskrift, forvandler dette verktøyet enhver nettside til en åpen bok av typografi. FontLens er en fontfinner og CSS-inspektør i ett. Den navngir ikke bare skriftfamilien for deg, den gir deg klar-til-bruk kode, en interaktiv lekeplass for å teste ideer, og tilgjengelighetsverktøy for å sikre at teksten din er lesbar. Ingen konto. Ingen påmelding. Bare velg, høyreklikk og undersøk. 🔍 Hva du kan gjøre • Avslør den fullstendige typografien for alle valgte ord: skriftfamilie, skriftstørrelse, skriftvekt, linjehøyde og fargen med et blikk • Se ekstra stilisting som er lett å overse, for eksempel tegnspacing (letter-spacing), teksttransformasjon (text-transform) og skriftstil (font-style) • Kopier hvilken som helst enkelt egenskap med ett klikk, eller hent hele regelsettet som et komplett CSS-utdrag • Konverter det utdraget til Tailwind, SCSS eller SASS gjennom enkle faner, og kopier deretter hele eller linje for linje • Eksperimenter i en levende, redigerbar forhåndsvisning: skriv om eksempelordene, juster verdiene, bytt bakgrunn, og se det oppdateres umiddelbart • Identifiser hvor en nettfont kommer fra med et leverandørmerke (Google Fonts, Adobe Fonts, selvhostet, eller en innebygd systemfont) • Lagre en nettfont på datamaskinen din med "Last ned font"-knappen, hentet direkte fra dens egen kilde • Sjekk fargekontrast mot WCAG-standarder, med nøyaktig forhold pluss AA- og AAA-passerings- eller feilresultater • Velg og prøv farger med en komplett fargevelger, inkludert et pipetteverktøy for å fange hvilken som helst piksel på skjermen • Bytt måleenheter mellom px, rem, pt og em, brukt på både feltene og den eksporterte koden 🖱️ Hvordan det fungerer Det tar sekunder å bruke FontLens. Marker ordene du vil studere, høyreklikk på utvalget, og velg "Inspiser font med FontLens" fra menyen. Panelet vises over gjeldende side, pent стиlet slik at det aldri kolliderer med nettstedets eget utseende. Derfra kan du lese detaljene, kopiere det du trenger, eller begynne å redigere. Den levende forhåndsvisningen er der ting blir morsomt. Endre ordlyden for å teste en ekte overskrift, dytt på størrelsen, juster vekten, eller angi en ny bakgrunnsfarge for å se hvordan skrifttypen holder seg. Redigeringene dine blir værende når du beveger deg mellom sider og kommer tilbake senere, slik at en idé du startet på én side venter på deg på den neste. Når du vil ha de opprinnelige verdiene tilbake, gjenoppretter "Tilbakestill til side"-knappen alt siden faktisk bruker. Trenger du råmaterialet? For en nedlastbar nettfont henter én knapp den virkelige filen fra dens @font-face-plassering. For en skrifttype som allerede følger med operativsystemet ditt, forteller FontLens deg at det er en innebygd font, slik at du vet at den er tilgjengelig uten nedlasting. 🔒 Personvern først FontLens kjører utelukkende i nettleseren din. Det er ingen datainnsamling, ingen sporing, ingen analyser, og ingen eksterne servere involvert i å inspisere tekst. Alt du undersøker, forblir på maskinen din. Utvidelsen foretar nøyaktig én nettverksforespørsel, og kun når du bevisst trykker "Last ned font", da den tar kontakt med fontens egen kilde for å hente filen. Ingenting annet forlater enheten din. Tillatelsene er bevisst snevre. Kontekstmeny-tillatelsen legger til høyreklikkelementet. Den aktive-fane-tillatelsen lar verktøyet lese teksten du valgte på fanen der du aktiverer den, og ingen andre steder. Lagring beholder forhåndsvisningsteksten din og dine enhets- og formatoppsett slik at de huskes neste gang. Det er ingen bred tilgang til nettleserloggen din og ingen omfattende vertstillatelser. 👥 Hvem det er for • Webdesignere som ønsker å identifisere en skrifttype, fange en palett og gjenbruke stiler raskt • Frontend-utviklere som matcher en mock-up eller løfter nøyaktige skriftfamilie- og avstandsverdier inn i kode • UI- og UX-ingeniører som bygger konsistente, merkevaretilpassede typesystemer • Studenter som lærer CSS og typografi og ønsker å se hvordan ekte nettsteder er satt sammen • Tilgjengelighetsrevisorer som verifiserer at tekst oppfyller WCAG-kontrastkravene før publisering • Bloggere, markedsførere og nysgjerrige lesere som rett og slett vil vite hvilken font et nettsted bruker ✨ Hvorfor folk beholder den • Ett høyreklikk gir deg svaret i stedet for å grave i utviklerverktøy • Koden er klar til å kopieres i ren CSS, Tailwind, SCSS eller SASS, slik at den faller rett inn i prosjektet ditt • Den redigerbare forhåndsvisningen lar deg prototyper skriftvalg uten å røre en eneste kodelinje • Kontrastkontrolløren bygger tilgjengelighet inn i arbeidsflyten din i stedet for å la det være en ettertanke • Fargevelgeren og pipetten betyr at du kan prøve og gjenbruke nøyaktige farger fra hvor som helst på siden • Lyse og mørke temaer følger operativsystemet automatisk, slik at det føles hjemme dag som natt • Enhetsbytte mellom px, rem, pt og em holder utdataene justert med hvordan kodebasen din er skrevet 🎨 En nærmere titt på detaljene Typografi er mer enn et navn. FontLens avdekker de små beslutningene som gjør at tekst føles riktig, fra vekten av en overskrift til den romslige linjehøyden og den subtile sporingen av tegnspacing. Å se disse verdiene side om side hjelper deg å forstå hvorfor et design fungerer og hvordan du kan gjenskape det. Leverandørmerket gir også kontekst, og forteller deg med et blikk om du ser på en Google Fonts-ressurs, en Adobe Fonts-front, en selvhostet fil eller en systemstandard, som ofte er den første ledetråden når du skal matche eller finne en skrifttype. Fargeverktøyene går utover en statisk avlesning. Fargevelgeren tilbyr et HSV-kvadrat med fargemetnings- og alfapregere, og den snakker HEX, RGB og HSL slik at du kan arbeide i det formatet som passer deg. Kombiner det med pipetteverktøyet, og du kan hente den nøyaktige nyansen av et hvilket som helst element og slippe den inn i forhåndsvisningen din eller notatene dine. 🚀 Begynn å inspisere Legg til FontLens, marker noen ord, og høyreklikk for å avsløre typografien, stilene og fargene bak enhver side. Det er en rask, privat og genuint nyttig følgesvenn for alle som bryr seg om hvordan nettet leses. Installer den, ha den for hånden, og aldri mer lure på en mystisk skrifttype.