Come sapere quali caratteri utilizza un sito Web

Se hai mai visto un sito Web particolarmente attraente e ti sei chiesto come vedere quali caratteri utilizza un sito Web, la risposta è semplice come aprire la finestra di ispezione del browser. Ogni bit di un sito web viene interpretato nel tuo browser. Quindi, se sai usare correttamente il tuo browser inspector puoi non solo scoprire le fonti ma anche le immagini che ha, le proprietà CSS di qualsiasi altro elemento trovato nella pagina.

In questo post, vedremo come utilizzare l'ispettore del browser Chrome per trovare quali caratteri utilizza un sito Web e persino come iniziare a giocarci. Ma prima, spiegherò come accedervi e quali funzionalità hai a disposizione nell'ispettore.

Accedi a Chrome Inspector

Se utilizzi il browser Chrome e desideri ispezionare un sito web, la prima cosa da fare è accedere alla finestra di ispezione. Ci sono diversi modi per farlo:

• Premendo il tasto F12, o
• Cliccando con il tasto destro su una determinata voce e nel menu che si apre, accedi all'opzione Inspect . Il vantaggio di questo metodo è che evidenzia direttamente l'elemento in questione, o
• Premendo la combinazione di tasti Control + Shift + I (su Windows) o Cmd + Alt + I (su Mac) o
• Accedendo al menu Chrome (3 punti nella barra in alto a destra) » Altri strumenti » Strumenti per sviluppatori.

La finestra di ispezione può essere visualizzata integrata nella finestra del browser stessa o visualizzata in una finestra separata. Per accedere a queste opzioni puoi farlo cliccando sull'icona di configurazione (3 punti) in alto a destra dell'ispettore e modificando il valore della proprietà «Dock Side».

Hai anche la possibilità di visualizzare il contenuto della pagina in modalità di visualizzazione computer o come se lo stessi visualizzando su un dispositivo mobile. Fai clic sul secondo pulsante sul lato sinistro della barra in alto dell'ispettore e vedrai come il contenuto verrà automaticamente visualizzato come se stessi accedendo da un dispositivo mobile.

Puoi anche indicare il tipo di dispositivo su cui desideri che lo visualizzi, le dimensioni o se desideri visualizzarlo in modalità verticale o orizzontale.

Schede principali dell'ispettore

Come avrai visto, l'ispettore è composto da diverse schede.

Da ognuno di essi avrai accesso a diverse funzionalità e caratteristiche:

• Elementi : mostra il codice HTML della pagina, nonché gli stili applicati. puoi anche modificarli e aggiungere nuove regole rapidamente.
• Console : mostra i diversi messaggi di errore e di avviso che si verificano sulla pagina (immagini che non si caricano, errori javascript,...)
• Fonti : mostra l'albero delle risorse per la pagina. Puoi vedere da dove vengono ottenute le diverse risorse e modificarle.
• Rete : mostra le diverse richieste effettuate dal sito, accedendo al contenuto della richiesta, alla risposta ottenuta, ai tempi...
• Performance : mostra i processi in esecuzione e serve a misurare le prestazioni della pagina.
• Memoria : mostra la memoria consumata durante il caricamento e l'esecuzione della pagina web.
• Applicazione n: visualizza informazioni utili sulle risorse utilizzate da un'applicazione web.
• Sicurezza : visualizza le informazioni sui diversi siti a cui si accede dalla pagina e i rispettivi certificati.
• Audit : consente di generare un rapporto di audit per verificare gli errori.
• Esistono plug-in che aggiungono schede e funzionalità all'ispettore, quindi potrebbero esserci più schede. Nell'immagine precedente, viene mostrato che abbiamo installato il plug- in Redux DevTools .

Scheda Elementi

Torniamo ora alla questione in esame: volevamo conoscere il carattere di qualsiasi contenuto di una pagina web.

Come accennato in precedenza, dalla scheda Elementi è possibile accedere al codice HTML e agli stili dei diversi elementi della pagina in cui ci si trova.

Come puoi vedere nell'immagine sopra, sulla sinistra hai la finestra principale che ti mostra il codice sorgente. E sulla destra, hai il pannello delle regole di stile CSS che vengono applicate ai diversi elementi della pagina.

Infatti, nel pannello degli stili hai tre schede:

• Stili : mostra le regole CSS applicate e puoi modificarle e aggiungerne di nuove.
• Calcolato : mostra tutte le regole applicate all'elemento, con un pannello che rappresenta i bordi, il margine e il riempimento dell'elemento.
• Listener di eventi : mostra l'albero degli eventi che sono stati lanciati nella pagina e i controlli da essi interessati.

Visualizza i dettagli di un articolo

Quindi, ad esempio, se vai alla nostra pagina principale di Nelio Software, seleziona le parole Nelio Software dal titolo e fai clic con il tasto destro per ispezionare di cosa si tratta, l'ispettore si apre mostrandoti l'immagine sopra.

Nell'immagine dell'ispettore, puoi vedere che la finestra principale mi dice che lo stile del titolo "Nelio Software" è h1 .

In questa stessa finestra, hai la possibilità di fare clic con il pulsante destro del mouse su qualsiasi attributo o testo e modificarlo o eliminarlo. Ovviamente, qualsiasi modifica che apporti qui non modificherà il contenuto originale, ma è proprio uno strumento molto utile quando stai progettando pagine e vuoi avere un'idea di come appare qualsiasi modifica che apporti.

Vedi il carattere

Ora sai che è un titolo, ma per quanto riguarda il carattere?

Bene, molto semplice, nella scheda Calcolato dell'ispettore troverai tutte le proprietà dell'elemento selezionato. Scorri verso il basso fino all'attributo font-family e lì troverai esattamente il font che ha il titolo del nostro sito web.

E se sei curioso di sapere come apparirebbe quell'elemento se volessi cambiare il carattere, vai alla scheda Stili , scendi all'attributo font-family e puoi modificarlo direttamente con il valore che desideri.

Vedrai automaticamente il tuo sito web con il tipo di carattere modificato

Come puoi vedere, l'ispettore di Google Chrome è uno strumento molto comodo e facile da usare per giocare e provare il design che avresti lasciato dopo aver applicato qualsiasi modifica a un elemento.

Che dire del carattere di un'immagine?

L'ispettore di Google Chrome, come hai visto, ti consente di visualizzare le proprietà di qualsiasi elemento della tua pagina. Ma se quello che vuoi vedere è il carattere di un'immagine su un sito Web, non sarai in grado di vederlo con l'ispettore. L'ispettore ti mostrerà le proprietà dell'immagine in quanto tale inserita nella tua pagina ma non ti mostrerà i dettagli del contenuto di quell'immagine.

Per fare ciò, ci sono alcuni strumenti, come Font Squirrel Matcherator o Whatfontis.com, che possono aiutarti a identificare il carattere utilizzato in un'immagine. Per fare ciò, in entrambi gli strumenti devi scaricare l'immagine (su whatfontis.com puoi anche indicare l'URL dell'immagine) e poi selezionare la parte dell'immagine che contiene la lettera che vuoi identificare.

Entrambi gli strumenti ti mostreranno un intero set di caratteri che corrispondono all'incirca al testo selezionato. Ma se sospetti che questa non sia una corrispondenza esatta, puoi cercare su Google caratteri simili a quelli indicati dallo strumento e vedrai cosa ottieni.

Immagine in primo piano di Gemma Evans su Unsplash.