FontLens

Seleccioneu qualsevol text, feu clic dret i inspeccioneu instantàniament la seva font, mida, pes, color i CSS. Copieu, modifiqueu,…

Alguna vegada has anat a una pàgina, has admirat la lletra i t'has preguntat "quina font és aquesta?" FontLens respon aquesta pregunta amb un sol clic. Selecciona qualsevol text en qualsevol lloc web, fes clic dret i tria "Inspeccionar font amb FontLens". Un panell net i centrat s'obre directament sobre la pàgina i revela exactament com està estilitzat aquest text: el tipus de lletra, la seva mida, el pes, l'altura de línia, el color i tots els altres detalls darrere del disseny. Tant si ets un dissenyador que fa enginyeria inversa d'un disseny, un desenvolupador que coincideix amb una especificació, o simplement algú curiós sobre un títol bonic, aquesta eina converteix qualsevol pàgina web en un llibre obert de tipografia. FontLens (Lents de Font) és un cercador de fonts i un inspector de CSS tot en un. No només et diu la família de fonts, sinó que et proporciona codi llest per utilitzar, un espai de treball interactiu per provar idees i eines d'accessibilitat per assegurar que el teu text sigui llegible. Sense compte. Sense registre. Simplement selecciona, fes clic dret i examina. 🔍 Què pots fer - Revelar la tipografia completa de qualsevol paraula seleccionada: família de font, mida de font, pes de font, altura de línia i el color d'una ullada - Veure estils addicionals que són fàcils de passar per alt, com l'espaiat entre lletres, la transformació de text i l'estil de font - Copiar qualsevol propietat individual amb un clic, o agafar tot el conjunt de regles com un fragment CSS complet - Convertir aquest fragment a Tailwind, SCSS o SASS mitjançant pestanyes senzilles, i després copiar-lo sencer o línia per línia - Experimentar en una vista prèvia en viu i editable: reescriure les paraules de mostra, ajustar els valors, canviar el fons i veure com s'actualitza instantàniament - Identificar d'on prové una font web amb una insígnia del proveïdor (Google Fonts, Adobe Fonts, autoallotjada o un tipus de lletra del sistema integrat) - Desa una font web al teu ordinador amb el botó "Descarregar font", extreta directament de la seva pròpia font - Comprovar el contrast de color segons els estàndards WCAG, amb la relació exacta més resultats AA i AAA d'aprovat o suspès - Triar i provar colors amb un selector complet, incloent un comptagotes per agafar qualsevol píxel de la pantalla - Canviar les unitats de mesura entre px, rem, pt i em, aplicades tant als camps com al codi exportat 🖱️ Com funciona Utilitzar FontLens (Lents de Font) triga segons. Ressalta les paraules que vols estudiar, fes clic dret a la selecció i tria "Inspeccionar font amb FontLens" del menú. El panell apareix sobre la pàgina actual, ben estilitzat perquè mai coli amb l'aparença del propi lloc. Des d'allà pots llegir els detalls, copiar el que necessites o començar a editar. La vista prèvia en viu és quan les coses es posen interessants. Canvia la redacció per provar un titular real, ajusta la mida, el pes o defineix un nou color de fons per veure com funciona el tipus. Les teves edicions es mantenen mentre et mous entre pàgines i tornes més tard, de manera que una idea que vas començar en un lloc t'espera al següent. Quan vulgueu els valors originals de nou, el botó "Restableix al lloc" restaura tot el que la pàgina utilitza realment. Necessites l'actiu en brut? Per a una font web descarregable, un botó recupera el fitxer real de la seva ubicació @font-face. Per a un tipus de lletra ja inclòs amb el teu sistema operatiu, FontLens t'indica que és una font integrada, de manera que saps que està disponible sense cap descàrrega. 🔒 Privadesa primer FontLens (Lents de Font) funciona completament dins del teu navegador. No hi ha recollida de dades, ni seguiment, ni analítiques, ni servidors externs implicats en la inspecció de text. Tot el que examines roman a la teva màquina. L'extensió fa exactament una sol·licitud de xarxa, i només quan prems deliberadament "Descarregar font", moment en què es posa en contacte amb la font d'aquesta font per recuperar el fitxer. Res més surt del teu dispositiu. Els permisos són intencionadament reduïts. El permís del menú contextual afegeix l'entrada de clic dret. El permís de pestanya activa permet a l'eina llegir el text que has seleccionat a la pestanya on l'invoques, i en cap altre lloc. L'emmagatzematge conserva el teu text de previsualització i les teves preferències d'unitat i format perquè siguin recordades la propera vegada. No hi ha accés ampli al teu historial de navegació ni permisos d'amfitrió generalitzats. 👥 Per a qui és - Dissenyadors web que volen identificar un tipus de lletra, capturar una paleta i reutilitzar estils ràpidament - Desenvolupadors de front-end que coincideixen amb un mockup o incorporen valors exactes de família de fonts i espaiat al codi - Enginyers de UI i UX que construeixen sistemes de tipus coherents i alineats amb la marca - Estudiants que aprenen CSS i tipografia que volen veure com es construeixen els llocs reals - Auditors d'accessibilitat que verifiquen que el text compleix els requisits de contrast de WCAG abans de la publicació - Bloggers, venedors i lectors curiosos que simplement volen saber quina font utilitza un lloc ✨ Per què la gent la manté - Un clic dret et dóna la resposta en lloc de rebuscar a les eines per a desenvolupadors - El codi està llest per copiar en CSS, Tailwind, SCSS o SASS, de manera que s'integra directament al teu projecte - La previsualització editable et permet prototipar seleccions de tipus sense tocar ni una sola línia de codi - El verificador de contrast integra l'accessibilitat al teu flux de treball en lloc de deixar-la com a consideració posterior - L'eina de selecció de color i el comptagotes et permeten mostrejar i reutilitzar colors exactes des de qualsevol lloc de la pàgina - Els temes clar i fosc segueixen el teu sistema operatiu automàticament, així que es sent familiar de dia i de nit - El canvi d'unitats entre px, rem, pt i em manté la sortida alineada amb la forma en què està escrit el teu codi 🎨 Una mirada més propera als detalls La tipografia és més que un nom. FontLens (Lents de Font) mostra les petites decisions que fan que el text es senti bé, des del pes d'un encapçalament fins a l'espaiat en l'altura de línia i el subtil seguiment de l'espaiat entre lletres. Veure aquests valors junts t'ajuda a entendre per què un disseny funciona i com recrear-lo. La insígnia del proveïdor també afegeix context, indicant-te d'un cop d'ull si estàs mirant un actiu de Google Fonts, una cara d'Adobe Fonts, un fitxer autoallotjat o un valor predeterminat del sistema, que sovint és la primera pista quan intentes coincidir o obtenir una font. Les eines de color van més enllà d'una lectura estàtica. El selector ofereix un quadrat HSV amb lliscadors de tonalitat i alfa, i parla HEX, RGB i HSL perquè puguis treballar amb el format que més et convingui. Combina-ho amb el comptagotes i podràs agafar el to precís de qualsevol element i deixar-lo a la teva previsualització o a les teves notes. 🚀 Comença a inspeccionar Afegeix FontLens (Lents de Font), ressalta algunes paraules i fes clic dret per revelar la tipografia, els estils i els colors darrere de qualsevol pàgina. És un company ràpid, privat i genuïnament útil per a qualsevol persona que es preocupi per com es llegeix la web. Instal·la-ho, tingues-lo a mà i mai més et preguntes per una font misteriosa.