Come faccio a sapere quali caratteri utilizza un sito Web?

Come posso sapere quale tipo di carattere o tipi di carattere utilizza un sito Web? Esistono strumenti o estensioni del browser che possono semplificare il lavoro?

Opzione 1: utilizzare un'estensione del browser (facile)

Estensioni come WhatFont (disponibile per Chrome, Firefox e Safari) semplificano il rilevamento di famiglie di caratteri di qualsiasi testo in una pagina Web. Devi solo installare l'estensione, attivarla su un sito e fare clic sull'elemento che desideri ispezionare. I risultati sono mostrati in una casella mobile, sempre nel contesto di tua scelta.

Opzione 2: controlla manualmente il CSS con gli ispettori del browser (Avanzato)

La maggior parte dei browser Web consente di trovare facilmente i caratteri utilizzando right-click→ 'Ispeziona' o 'Ispeziona elemento'. Può anche essere fatto premendo F12. Questo mostrerà un elenco di stili collegati al sito Web, che puoi esplorare per trovare i caratteri utilizzati in qualsiasi elemento HTML.

L'uso dell'ispettore non è così semplice come l'uso di un'estensione, ma presenta diversi vantaggi. È richiesta una certa comprensione dei CSS, poiché di solito è necessario passare attraverso diversi stili per trovare quello che viene applicato. Come regola generale, gli stili barrati vengono sovrascritti, quindi cerca sempre quelli applicati per ultimi.

Tutti gli stili della pagina sono elencati nella scheda Stile , ma se invece usi la scheda Calcolato , puoi trovare le proprietà che sono attivamente applicate all'elemento che hai selezionato, inclusa ovviamente la famiglia di caratteri.

Infine, un altro modo per verificare rapidamente quali caratteri vengono utilizzati a livello globale (ma NON come o dove) è quello di andare su "Applicazione → Cornici → Caratteri" . Lì troverai un elenco di tutti i caratteri di riferimento (non di sistema).

Questo secondo metodo è più lento, ma l'uso dell'ispettore può darti un'idea approfondita del modo in cui l'intera pagina è costruita. Inoltre, molti progettisti e sviluppatori lo usano come strumento per testare le modifiche prima di scriverle sul foglio di stile (perché la modifica di una linea CSS nell'ispettore attiva un'anteprima in tempo reale nel browser).

L '"elemento di ispezione" del browser non è perfetto

L'uso degli strumenti di sviluppo del tuo browser è un buon modo per vedere quali caratteri sono dichiarati nel CSS di un sito web. Questo non mostra quale tipo di carattere viene effettivamente visualizzato, ma mostra solo lo stack di caratteri applicato, il tipo di carattere effettivamente visualizzato può variare a seconda dei caratteri installati, ecc.

Un altro strumento utile è Fount .

Fount ti dirà quale tipo di carattere web nella tua pila di caratteri stai effettivamente vedendo - non solo ciò che dovrebbe essere visto. Ti dirà anche la dimensione del carattere, il peso e lo stile.

Usare Fount è facile come aggiungere un segnalibro. Non è necessario installare un'app o alcuna estensione.

Dopo aver aggiunto il segnalibro:

1. Vai a qualsiasi sito e fai clic sul bookmarklet Fount.
2. Fai clic su qualsiasi tipo che desideri identificare. Ripetere.
3. Per disattivare Fount, fai di nuovo clic sul bookmarklet.

Fount funziona in Safari, Chrome, Firefox e IE8 +.

Adoro l'estensione CSSViewer per browser Chrome . Basta fare clic e passare con il mouse sopra il carattere che si desidera identificare e ti mostra la famiglia di caratteri.

FontFinder è creato per designer, sviluppatori e tipografi. Consente a un utente di analizzare le informazioni sui caratteri di qualsiasi elemento in una pagina, copiare negli appunti qualsiasi pezzo (i) di tali informazioni ed eseguire sostituzioni in linea per testare nuovi layout.

Questo componente aggiuntivo è il migliore per trovare il carattere e altri CSS come peso del carattere, dimensioni e molte altre pagine web del modulo.