Come trovare il carattere di una pagina Web utilizzando lo strumento Inspect Element e le estensioni del browser

Il successo del tuo sito web dipende molto dal suo aspetto. Avere la giusta combinazione di colori e il tema manterrà i tuoi visitatori sul tuo sito per un po ‘ più a lungo. Oltre alla tavolozza dei colori e alla struttura del tuo sito, il tipo di carattere scelto svolge anche un ruolo essenziale nel mantenere il pubblico impegnato.

Forse ti imbatti in un sito accattivante durante la navigazione sul web e vuoi sapere quali tipi di carattere sta usando. Con le estensioni online e lo strumento integrato Inspect Element del browser, identificare un font è semplice e veloce.

Come trovare i font utilizzando lo strumento Inspect Element

Nel caso in cui non lo sapessi, lo strumento Inspect Element integrato nel browser consente di esaminare il codice sorgente di un sito web. È possibile comprendere gli elementi di design di un sito guardando il suo CSS, HTML e altre informazioni. È un ottimo modo per trarre ispirazione quando si progetta il proprio sito.

Il processo di identificazione di un font utilizzando lo strumento Inspect Element è abbastanza semplice e non avrai bisogno di alcuna abilità di codifica. Questo strumento è disponibile in tutti i browser sul mercato, e ognuno ha un layout simile.

Ecco come identificare un font utilizzando lo strumento di ispezione del browser.

1. Aprire il sito web che si desidera utilizzare.
2. Evidenzia il testo con il carattere che vuoi identificare e fai clic con il pulsante destro del mouse.
3. Fare clic su Ispeziona dal menu contestuale.
   

   

4. Quando si apre il menu Ispeziona, fare clic su Calcolato.
5. Scorri verso il basso per trovare la sezione Font-Family. Qui puoi trovare il nome e lo stile del font, nonché le sue dimensioni.
   

   

Altri modi per utilizzare lo strumento Inspect

Se si desidera un modo più rapido per trovare il carattere di un sito utilizzando lo strumento Inspect, provare questo invece:

1. Aprire il sito web che si desidera utilizzare.
2. Premi Ctrl + Maiusc + C (Cmd + Maiusc + C su Mac).
3. Passa il mouse sopra il testo per visualizzare lo stile del carattere, la dimensione, il codice colore e il margine.
   

   

È inoltre possibile controllare l’elenco dei font utilizzati in una pagina Web utilizzando lo strumento Ispeziona. Ecco come fare questo:

1. Vai alla pagina web.
2. Aprire il codice sorgente premendo Ctrl + Maiusc + I (Cmd + Maiusc + I su Mac).
3. Fare clic sulla scheda Rete, quindi selezionare la scheda Carattere.
4. Qui, vedrai un elenco di tutti i font utilizzati nella pagina web.
   

   

Per ottenere l’elenco di tutti i font in tempo reale, potrebbe essere necessario aggiornare la pagina web.

Come identificare i font utilizzando le estensioni del browser

Se si desidera un modo più conveniente per identificare un font, è possibile installare un’estensione del browser per la ricerca di font. Mentre ci sono diverse estensioni del browser che possono aiutare a rilevare i font sul web, i due più popolari sono WhatFont e Font Finder.

Diamo un’occhiata al processo di identificazione dei font utilizzando entrambe le estensioni.

WhatFont

WhatFont è molto popolare per rilevare rapidamente più font contemporaneamente. Ecco come utilizzare questo strumento.

1. Quando WhatFont è abilitato nel browser, passa il mouse sopra il testo per mostrarne il carattere.
   

   

2. Una volta fatto clic sul testo, apparirà una finestra popup con il resto dei dettagli del carattere, come la dimensione del carattere, il colore e lo stile.
   

   

3. Inoltre, è possibile selezionare più sezioni di testo contemporaneamente per confrontare diversi tipi di carattere sulla stessa pagina.
   

   

Scarica: WhatFont per Chrome / Firefox / Safari (Gratuito)

Font Finder

Font Finder visualizza anche i dettagli dei font quando si passa sopra qualsiasi testo su un sito web. Tuttavia, fornisce un sacco di dettagli tecnici, in modo che possa ottenere un po ‘ di confusione se non si ha familiarità con il web design.

Detto questo, Font Finder è più adatto per gli sviluppatori web che vogliono sostituire i font esistenti con quelli nuovi in tempo reale. In questo modo è facile testare i font prima di apportare modifiche permanenti.

Ecco come testare un font utilizzando Font Finder:

1. Evidenziare una porzione di testo dalla pagina web.
2. Fare clic destro su di esso e selezionare Font Finder dal menu contestuale.
   

   

3. Selezionare Sostituisci carattere con e immettere il nome del carattere. Aggiungiamo Calibri e vediamo come cambia il carattere nell’anteprima.
   

   

4. Se si desidera ripristinare il carattere, aggiornare la pagina.
   

   

Scarica: FontFinder per Chrome / Edge / Firefox (Gratuito)

Che dire del controllo del carattere in un’immagine?

Se si desidera identificare i caratteri in un’immagine, le estensioni del browser e lo strumento di ispezione del browser potrebbero non essere di aiuto. Tuttavia, puoi provare gli strumenti di ispezione delle immagini online come WhatFontIs, FontSquirrel, Fontspring, WhatTheFont e molti altri.

Il processo per identificare un font da un’immagine è in gran parte lo stesso in tutti gli strumenti. Proviamo a identificare il carattere in un’immagine usando WhatTheFont.

1. Se non l’hai già fatto, scarica l’immagine che vuoi usare.
2. Importa l’immagine in WhatTheFont.
   

   

3. WhatTheFont rileverà automaticamente il testo nella tua immagine. Ridurre o ingrandire la casella di ritaglio in modo che circonda il carattere che si desidera identificare. Premi il pulsante freccia al termine.
   

   

4. WhatTheFont sarà quindi abbinare il carattere nell’immagine con i font nella sua galleria, e vi mostrerà i caratteri strettamente correlati.
   

   

5. Se non trovi subito una buona corrispondenza, puoi continuare a fare clic su Mostra più risultati per vedere più font correlati.
   

   

Rileva i font dal Web e utilizzali nei tuoi progetti

I font svolgono un ruolo significativo nel successo di un sito web o di un progetto grafico. Se si inciampa su un carattere coinvolgente durante la navigazione sul web, si può facilmente rilevare utilizzando i metodi di cui sopra.