Famiglia di caratteri

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 18 di 76.

In CSS, la proprietà font-family viene utilizzata per specificare il carattere tipografico del testo all'interno di un elemento HTML. Questa proprietà ti consente di elencare i caratteri tipografici preferiti per il tuo testo. Se il primo carattere tipografico non è disponibile, il browser utilizzerà quello successivo nell'elenco, garantendo un aspetto simile.

Ecco la sintassi di base per usare la proprietà font-family:

selector {
    font-family: font1, font2, generic-family;
}

font1, font2: I nomi delle famiglie di caratteri preferiti, elencati in ordine di preferenza. Se font1 non è disponibile, il browser proverà font2 e così via.

generic-family: il nome di una famiglia di font generica, come serif, sans-serif, monospace, cursive o fantasy. Serve come alternativa se nessuno dei font specificati è disponibile.

Quando specifichi i nomi delle famiglie di caratteri, è importante seguire queste linee guida:

Se il nome di una famiglia di caratteri contiene spazi, dovrebbe essere racchiuso tra virgolette (ad esempio, "Times New Roman", "Courier New").

I nomi di più famiglie di caratteri devono essere separati da virgole.

È buona prassi includere una famiglia di caratteri generica come ultima opzione nell’elenco, per assicurarti che venga utilizzato un fallback adatto se nessuno dei caratteri specificati è disponibile.

Per esempio:

p {
    font-family: Arial, Helvetica, sans-serif;
}

Sfida

Facile

Ti viene fornito un documento HTML con un'intestazione (<h1>) e un paragrafo (<p>). Il tuo compito è usare la proprietà font-family per applicare uno stile a questi elementi. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <h1>. Imposta font-family su "Times New Roman", Times, serif.
Scrivi una regola CSS che selezioni l'elemento <p>. Imposta font-family su Arial, Helvetica, sans-serif.

Provalo tu

<html>
<head>
    <title>Font Family</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>