Esistono diversi modi per ottenere questo risultato. In realtà lo faccio parecchio, perché sono molto interessato a come funziona il CSS e adoro anche la tipografia. I due modi in cui mi piace fare questo sono:
Come interpretare il font-familyCSS:
La font-familyproprietà determinerà quali sono i caratteri. In questa proprietà, i caratteri saranno separati da virgole . Durante il rendering della pagina, verrà visualizzato un browser attraverso questo elenco e verrà utilizzato il primo carattere al suo interno sul computer . In molti casi, c'è anche una categoria di caratteri alla fine di questa proprietà, che è solo un "just-in-case" in modo che venga usato il carattere predefinito per quella categoria se non ce ne sono altri disponibili.
Un esempio: supponiamo che questo sia un css per un <p>allegato.
p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}
Qui, il browser tenterà innanzitutto di utilizzare Calibri, se il carattere è disponibile. In caso contrario, utilizza Comic Sans MS, o Georgia, o solo il carattere predefinito sans-serif se gli altri non sono disponibili.
Ecco come puoi scoprire quali caratteri vengono utilizzati. Non ho trovato nessuno strumento ben costruito e utile che visualizzi il CSS in un modo molto carino, ma penso che l'opzione Inspector funzionerà per te (non è troppo confusa!). Penso che questa sia la strada da percorrere.
Esempio di come trovare i font di NYTimes con uno strumento Inspector:
Ti spiegherò come trovare i caratteri per il corpo principale del testo di un articolo di New York con Google Chrome.
Vai a un articolo su NYTimes.com, fai clic con il pulsante destro del mouse su un elemento di testo per il quale vuoi trovare i caratteri e premi Inspect Element .
Guarda la barra laterale a destra. Nel menu a discesa Stile calcolato , vedrai le proprietà CSS per questo elemento. Tuttavia, come puoi vedere, non esiste attualmente alcuna proprietà della famiglia di caratteri, il che significa che i caratteri sono definiti a livello globale, non solo per questo specifico elemento. Tuttavia, c'è un modo per aggirare questo!
Ecco cosa fai: seleziona il pulsante di opzione accanto a "Mostra ereditato".
Molte altre proprietà globali appariranno in "Stile calcolato".
Scorri verso il basso nell'elenco fino a "famiglia di caratteri". Dovrebbe essere in grigio, nel senso che è una proprietà globale ereditata. Qui puoi vedere i caratteri usati! Ta-da!
