FontLens

Markera text, högerklicka och inspektera direkt dess typsnitt, storlek, vikt, färg och CSS – kopiera, justera, förhandsgranska och…

Har du någonsin landat på en sida, beundrat dess textning och undrat "vad är det här för typsnitt?" FontLens (Välj valfri text, högerklicka och inspektera dess typsnitt, storlek, vikt, färg och CSS — kopiera, justera, förhandsgranska och ladda ner.) svarar på den frågan med ett enda klick. Markera valfri text på vilken webbplats som helst, högerklicka och välj "Inspektera typsnitt med FontLens." En ren och fokuserad panel öppnas direkt över sidan och visar exakt hur texten är stiliserad: typsnittet, dess storlek, vikt, radhöjd, färg och alla andra detaljer bakom designen. Oavsett om du är en designer som undersöker en layout, en utvecklare som matchar en specifikation, eller bara nyfiken på en vacker rubrik, så förvandlar detta verktyg varje webbsida till en öppen bok om typografi. FontLens är en typsnittsidentifierare och CSS-inspektör i ett. Den nämner inte bara typsnittsfamiljen åt dig, den ger dig färdig kod, en interaktiv lekplats för att testa idéer och tillgänglighetsverktyg för att säkerställa att din text är läsbar. Inget konto. Ingen registrering. Bara markera, högerklicka och undersök. 🔍 Vad du kan göra - Avslöja den fullständiga typografin för alla valda ord: typsnittsfamilj, typsnittsstorlek, typsnittsvikt, radhöjd och färg på en gång - Se extra styling som är lätt att missa, såsom teckenavstånd, text-transform och typsnittsstil - Kopiera valfri enskild egenskap med ett klick, eller hämta hela regelsatsen som ett komplett CSS-kodstycke - Konvertera det kodstycket till Tailwind, SCSS eller SASS via enkla flikar, och kopiera sedan hela eller rad för rad - Experimentera i en live, redigerbar förhandsgranskning: skriv om exempelorden, justera värdena, byt bakgrunden och se det uppdateras direkt - Identifiera var ett webbtypsnitt kommer ifrån med en leverantörsetikett (Google Fonts, Adobe Fonts, självhostad, eller ett inbyggt systemtypsnitt) - Spara ett webbtypsnitt på din dator med knappen "Ladda ner typsnitt", hämtat direkt från dess egen källa - Kontrollera färgkontraast mot WCAG-standarder, med exakt förhållande plus AA- och AAA-passer eller misslyckanden - Välj och prova färger med en fullständig väljare, inklusive en färgpipett för att ta valfri pixel på skärmen - Växla mellan mätenheter som px, rem, pt och em, tillämpade på både fälten och den exporterade koden 🖱️ Hur det fungerar Att använda FontLens tar sekunder. Markera orden du vill studera, högerklicka på markeringen och välj "Inspektera typsnitt med FontLens" från menyn. Panelen visas över den aktuella sidan, snyggt stiliserad så att den aldrig kolliderar med webbplatsens eget utseende. Därifrån kan du läsa detaljerna, kopiera vad du behöver eller börja redigera. Den levande förhandsgranskningen är där det blir roligt. Ändra formuleringen för att testa en riktig rubrik, justera storleken, ändra vikten eller ställa in en ny bakgrundsfärg för att se hur typen håller. Dina ändringar bevaras när du flyttar mellan sidor och kommer tillbaka senare, så en idé du började på en webbplats väntar på dig på nästa. När du vill ha de ursprungliga värdena tillbaka, återställer knappen "Återställ till webbplats" allt som sidan faktiskt använder. Behöver du den råa tillgången? För ett nedladdningsbart webbtypsnitt hämtar en knapp den verkliga filen från dess @font-face-plats. För ett typsnitt som redan finns i ditt operativsystem berättar FontLens att det är ett inbyggt typsnitt, så du vet att det är tillgängligt utan någon nedladdning. 🔒 Sekretess först FontLens körs helt och hållet i din webbläsare. Det sker ingen datainsamling, ingen spårning, ingen analys och inga externa servrar är involverade i att inspektera text. Allt du undersöker stannar på din maskin. Tillägget gör exakt en nätverksförfrågan, och endast när du medvetet trycker på "Ladda ner typsnitt", vid vilken tidpunkt det kontaktar typsnittets egen källa för att hämta filen. Inget annat lämnar din enhet. Behörigheter är medvetet snäva. Kontextmenybehörigheten lägger till högerklicksalternativet. Behörigheten för aktiv flik låter verktyget läsa texten du valde på fliken där du åkallar det, och ingen annanstans. Lagring behåller din förhandsgranskningstext och dina enhets- och formatinställningar så att de kommer ihåg nästa gång. Det finns ingen bred åtkomst till din webbläsarhistorik och inga omfattande värdbehörigheter. 👥 Vem det är för - Webdesigners som vill identifiera ett typsnitt, fånga en palett och återanvända stilar snabbt - Frontend-utvecklare som matchar en mockup eller överför exakta typsnittsfamilj- och avståndsvärden till kod - UI- och UX-ingenjörer som bygger konsekventa, varumärkesrelaterade typsystem - Studenter som lär sig CSS och typografi och som vill se hur riktiga webbplatser är uppbyggda - Tillgänglighetsrevisorer som verifierar att texten uppfyller WCAG-kontrastkraven innan publicering - Bloggare, marknadsförare och nyfikna läsare som helt enkelt vill veta vilket typsnitt en webbplats använder ✨ Varför människor behåller det - Ett högerklick ger dig svaret istället för att gräva i utvecklarverktyg - Koden är kopieringsklar i vanlig CSS, Tailwind, SCSS eller SASS, så den passar rakt in i ditt projekt - Den redigerbara förhandsgranskningen låter dig prototypa typsnittsval utan att röra en enda kodrad - Kontrastkontrollen bygger in tillgänglighet i ditt arbetsflöde istället för att lämna det som en eftertanke - Färgväljaren och färgpipetten innebär att du kan prova och återanvända exakta färger från var som helst på sidan - Lätta och mörka teman följer ditt operativsystem automatiskt, så det känns hemma dag som natt - Enhetsväxling mellan px, rem, pt och em håller utdata anpassat efter hur din kodbas är skriven 🎨 En närmare titt på detaljerna Typografi är mer än bara ett namn. FontLens visar de små beslut som gör att text känns rätt, från vikten på en rubrik till utrymmet i radhöjd och den subtila spårningen av teckenmellanrum. Att se dessa värden sida vid sida hjälper dig att förstå varför en design fungerar och hur du återskapar den. Leverantörsmärket adderar också kontext, och berättar på ett ögonblick om du tittar på en Google Fonts-tillgång, ett Adobe Fonts-teckensnitt, en självhyst fil eller en systemstandard, vilket ofta är den första ledtråden när du ska matcha eller hitta ett typsnitt. Färgverktygen går bortom en statisk avläsning. Väljaren erbjuder en HSV-ruta med nyans- och alfareglage, och den talar HEX, RGB och HSL så att du kan arbeta i vilket format som passar dig. Kombinera det med färgpipetten så kan du lyfta den exakta nyansen av vilket element som helst och släppa den i din förhandsgranskning eller dina anteckningar. 🚀 Börja inspektera Lägg till FontLens, markera några ord och högerklicka för att avslöja typografin, stilarna och färgerna bakom vilken sida som helst. Det är en snabb, privat och genuint användbar följeslagare för alla som bryr sig om hur webben läses. Installera den, ha den till hands och undra aldrig mer över ett mystiskt typsnitt.