FontLens

Seleziona qualsiasi testo, fai clic con il tasto destro e ispeziona istantaneamente il suo font, dimensione, peso, colore e CSS:…

Sei mai capitato su una pagina, ammirato la grafica, e ti sei chiesto "che font è questo?" FontLens (LenteCarattere) risponde a questa domanda con un solo click. Seleziona qualsiasi testo su qualsiasi sito web, clicca con il tasto destro, e scegli "Ispeziona font con FontLens". Un pannello pulito e mirato si apre direttamente sopra la pagina e rivela esattamente come quel testo è stilizzato: il carattere, la sua dimensione, il peso, l'altezza della riga, il colore e ogni altro dettaglio dietro il design. Che tu sia un designer che fa reverse-engineering di un layout, uno sviluppatore che corrisponde a una specifica, o semplicemente curioso di una bella intestazione, questo strumento trasforma qualsiasi pagina web in un libro aperto della tipografia. FontLens è un rilevatore di font e un ispettore CSS in un unico strumento. Non si limita a darti il nome della famiglia di font, ma ti fornisce codice pronto all'uso, un'area di gioco interattiva per testare idee e strumenti di accessibilità per assicurarti che il tuo testo sia leggibile. Nessun account. Nessuna registrazione. Basta selezionare, cliccare con il tasto destro e esaminare. 🔍 Cosa puoi fare - Rivelare la tipografia completa di qualsiasi parola selezionata: famiglia di font, dimensione del font, peso del font, altezza della riga e colore a colpo d'occhio - Scoprire stili extra facili da trascurare, come spaziatura tra lettere, trasformazione del testo e stile del font - Copiare qualsiasi singola proprietà con un click, o prendere l'intero set di regole come uno snippet CSS completo - Convertire quello snippet in Tailwind, SCSS o SASS tramite semplici schede, quindi copiare interamente o riga per riga - Sperimentare in un'anteprima live e modificabile: riscrivere le parole di esempio, modificare i valori, cambiare lo sfondo e vederlo aggiornarsi istantaneamente - Identificare la provenienza di un web font con un badge del provider (Google Fonts, Adobe Fonts, self-hosted o un carattere di sistema integrato) - Salvare un web font sul tuo computer con il pulsante "Scarica font", prelevato direttamente dalla sua fonte originale - Controllare il contrasto dei colori rispetto agli standard WCAG, con il rapporto esatto e i risultati di superamento AA e AAA - Scegliere e campionare i colori con un selettore completo, inclusa una pipetta per prelevare qualsiasi pixel sullo schermo - Cambiare le unità di misura tra px, rem, pt ed em, applicate sia ai campi che al codice esportato 🖱️ Come funziona Usare FontLens richiede pochi secondi. Evidenzia le parole che vuoi studiare, clicca con il tasto destro sulla selezione e scegli "Ispeziona font con FontLens" dal menu. Il pannello appare sopra la pagina corrente, elegantemente stilizzato in modo da non entrare mai in conflitto con l'aspetto del sito. Da lì puoi leggere i dettagli, copiare ciò di cui hai bisogno o iniziare a modificare. L'anteprima live è dove le cose si fanno interessanti. Cambia la formulazione per testare un vero titolo, modifica la dimensione, regola il peso o imposta un nuovo colore di sfondo per vedere come si comporta il testo. Le tue modifiche rimangono attive mentre ti muovi tra le pagine e torni più tardi, quindi un'idea che hai iniziato su un sito ti aspetta sul prossimo. Quando vuoi ripristinare i valori originali, il pulsante "Ripristina al sito" ripristina tutto ciò che la pagina utilizza effettivamente. Hai bisogno dell'asset originale? Per un web font scaricabile, un pulsante recupera il file reale dalla sua posizione @font-face. Per un carattere che viene fornito con il tuo sistema operativo, FontLens ti dice che è un font integrato, così sai che è disponibile senza alcun download. 🔒 La privacy prima di tutto FontLens funziona interamente all'interno del tuo browser. Non c'è raccolta di dati, nessun tracciamento, nessuna analisi e nessun server esterno coinvolto nell'ispezione del testo. Tutto ciò che esamini rimane sulla tua macchina. L'estensione effettua esattamente una richiesta di rete, e solo quando premi deliberatamente "Scarica font", a quel punto si connette alla fonte del font stesso per recuperare il file. Nient'altro lascia il tuo dispositivo. I permessi sono deliberatamente ristretti. Il permesso del menu contestuale aggiunge la voce del tasto destro. Il permesso della scheda attiva consente allo strumento di leggere il testo selezionato sulla scheda in cui lo invochi, e in nessun altro luogo. La memoria conserva il tuo testo di anteprima e le tue preferenze di unità e formato in modo che vengano ricordate la prossima volta. Non c'è accesso ampio alla tua cronologia di navigazione e nessun permesso di host esteso. 👥 A chi è rivolto - Web designer che desiderano identificare un carattere tipografico, catturare una palette e riutilizzare rapidamente gli stili - Sviluppatori front-end che corrispondono a un mockup o che inseriscono valori esatti di famiglia di font e spaziatura nel codice - Ingegneri UI e UX che costruiscono sistemi di caratteri coerenti e in linea con il marchio - Studenti che imparano CSS e tipografia e che desiderano vedere come sono costruiti i siti reali - Auditor dell'accessibilità che verificano che il testo soddisfi i requisiti di contrasto WCAG prima della pubblicazione - Blogger, marketer e lettori curiosi che desiderano semplicemente sapere quale font sta usando un sito ✨ Perché la gente lo tiene sempre a portata di mano - Un clic destro ti dà la risposta invece di scavare negli strumenti per sviluppatori - Il codice è pronto per essere copiato in CSS puro, Tailwind, SCSS o SASS, quindi si inserisce direttamente nel tuo progetto - L'anteprima modificabile ti consente di prototipare le scelte dei caratteri senza toccare una singola riga di codice - Il verificatore di contrasto integra l'accessibilità nel tuo flusso di lavoro invece di lasciarla come un ripensamento - Il selettore di colori e la pipetta ti permettono di campionare e riutilizzare i colori esatti da qualsiasi punto della pagina - I temi chiaro e scuro seguono automaticamente il tuo sistema operativo, facendoti sentire a casa giorno e notte - Il cambio di unità tra px, rem, pt ed em mantiene l'output allineato a come è scritto il tuo codebase 🎨 Uno sguardo più attento ai dettagli La tipografia è più di un nome. FontLens porta in superficie le piccole decisioni che rendono il testo giusto, dal peso di un'intestazione allo spazio di respiro nell'altezza della riga e al sottile tracciamento della spaziatura tra le lettere. Vedere questi valori fianco a fianco ti aiuta a capire perché un design funziona e come ricrearlo. Il badge del provider aggiunge anche contesto, dicendoti a colpo d'occhio se stai guardando un asset di Google Fonts, un carattere di Adobe Fonts, un file self-hosted o un predefinito di sistema, che è spesso il primo indizio quando si cerca di abbinare o trovare una famiglia di caratteri. Gli strumenti colore vanno oltre una lettura statica. Il selettore offre un quadrato HSV con cursori di tonalità e alfa, e parla HEX, RGB e HSL in modo da poter lavorare nel formato che preferisci. Abbinalo alla pipetta e potrai prelevare la tonalità precisa di qualsiasi elemento e inserirla nella tua anteprima o nelle tue note. 🚀 Inizia a ispezionare Aggiungi FontLens, evidenzia alcune parole e clicca con il tasto destro per rivelare la tipografia, gli stili e i colori dietro qualsiasi pagina. È un compagno veloce, privato e veramente utile per chiunque si preoccupi di come si legge il web. Installalo, tienilo a portata di mano e non ti chiederai mai più di un font misterioso.