Pubblicato il 05/07/24 - aggiornato il  | Nessun commento :

Come scoprire la famiglia di caratteri che usano i vari siti - 3 metodi

Scoprire i nomi dei font presenti su siti, su immagini o su video trovati su internet con tool online, con Photoshop e col sorgente pagina di Chrome

Se vi piace creare dei progetti grafici o multimediali sarete sempre alla ricerca di font originali ma adatti al contenuto realizzato. Vi sarà certamente capitato di imbattervi in un sito e visualizzare una famiglia di caratteri che vi piace particolarmente ma di cui non conoscete il nome. In questo post mostrerò tre sistemi per scoprirlo.

Vedremo nell'ordine come catturare un'immagine di una porzione del testo che ci interessa investigare, come trovare online il nome della famiglia mediante dei tool e una estensione, come scoprire font simili a quello con Photoshop e infine come ispezionare il codice sorgente della pagina per trovare in modo certo il nome della famiglia di caratteri.

Ho pubblicato sul Canale Youtube un tutorial in cui illustro come scoprire il nome della famiglia di font di un sito.

Per catturare una porzione di testo da un sito web bisogna scattare una istantanea che in gergo si chiama screenshot. Lo si può fare con programmi specifici come PicPick o il commerciale Snagit ma anche con uno strumento nativo di Windows. Si tratta dello Strumento di Cattura con cui si può anche registrare tutto o parte dello schermo.

Per aprirlo di digita la scorciatoia da tastiera ⊞ Win + Shift + S . In alto si visualizzeranno quattro pulsanti. Si sceglie il Rettangolo e si disegna intorno al testo di cui scoprire i font. In basso a destra del PC Windows apparirà una notifica. Ci si clicca sopra per aprire nello strumento lo screenshot selezionato e catturato.

salvare immagine del testo

Cliccando sul pulsante del floppy disk si potrà salvare come immagine JPG o PNG la porzione di testo catturata.

1) SCOPRIRE IL NOME DEI FONT CON TOOL ONLINE

Ci sono strumenti gratuiti online con cui è possibile scoprire il nome della famiglia di caratteri da una immagine.

Non sono particolarmente affidabili ma possono essere utili quando il testo si trovi già dentro un'immagine.

  1. What The Font;
  2. Font Finder;
  3. Identify Fonts;
  4. WhatFont.

I primi tre link riguardano degli strumenti online mentre il quarto link rimanda a una estensione di Chrome.

Il loro funzionamento è simile. Si carica una immagine quindi si attende che venga mostrato il nome del carattere.

identificare il font

Purtroppo spesso non si ottengono dei risultati attinenti alla realtà e quindi questa deve essere l'extrema ratio.

2) SCOPRIRE IL NOME DEI FONT CON PHOTOSHOP

Con il programma di grafica per antonomasia Photoshop si può trovare il nome della famiglia dei font e, in subordine, un elenco di famiglie di caratteri simili a quella data. Si fa andare Photoshop e si clicca su File → Apri.

Verrà caricata l'immagine del testo che è stata catturata. Si va quindi nel menù orizzontale in alto su Testo.

scoprire font simili

Si va poi su Trova Font Simili per aprire una finestra. Con il mouse si regola la selezione per contornare tutto il testo e escludere tutto il resto. Nella finestra che appare sulla destra si potranno visualizzare i nomi dei font simili.

Anche in questo caso i risultati non sempre sono precisi pure nel caso in cui il font sia già installato sul computer.

3) SCOPRIRE IL NOME DEI FONT con LA SORGENTE PAGINA

Il metodo più sicuro per scoprire il nome di un font usato in un testo è quello di aprire la pagina in cui si trova con un browser come Chrome. Il limite di questo metodo è che può essere applicato solo ai testi mostrati in una pagina web e non ai testi inseriti p.e. in una immagine o in un video. In questi casi l'unica è catturarne lo screenshot.

Si apre la pagina in cui è presente il testo da investigare con Chrome quindi si va nel menù dei tre puntini in alto a destra. Si clicca su Altri Strumenti → Strumenti per Sviluppatori con cui si aprirà una finestra in basso.

strumenti per sviluppatori

Si clicca su Elements quindi sul pulsante della selezione che è quello più in alto a sinistra. Si punta il testo con il cursore. L'elemento su cui abbiamo passato il mouse(hover) assumerà lo sfondo celeste e mostrerà i suoi parametri.

scoprire il noem del font con Chrome

Oltre al nome del font verranno mostrati anche la sua dimensione, il suo colore e i margini. Volendo ci si può cliccare sopra per selezionarlo e andare in basso a destra per ispezionarne i CSS che ne determinano l'aspetto.

stile dei CSS elemento

In font-family si visualizzerà il nome della famiglia dei caratteri. Si può p.e. usare questo codice HTML

<p style="font-family:ptserif, Georgia, Times, Times New Roman; font-size:19px">Testo inserito con lo stesso font del sito in oggetto</p>

per visualizzare il testo con lo stesso aspetto di quello del sito e investigato e scoperto nel sorgente pagina.

testare nome del font con il codice

Lo screenshot è stato realizzato incollando il codice su Real Time HTML Editor che ne mostra il rendering.



Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy