Lo stile del testo su una pagina web è una parte importante del web design. Ad esempio, potresti volere che le intestazioni appaiano in un carattere specifico o che tutto il testo di una pagina utilizzi il carattere serif.
Ecco dove si trova il carattere CSS -family entra in gioco. La proprietà CSS font-family ti consente di specificare una o più famiglie di caratteri che verranno utilizzate per lo stile del testo su una pagina web.
Questo tutorial discuterà, con riferimento ad esempi, le basi della proprietà CSS font-family e come è possibile utilizzare la proprietà per applicare uno stile al testo in una pagina web.
CSS Font Family
Ci sono molti aspetti coinvolti nello stile di un carattere in CSS, che vanno dall’impostazione di un colore alla dimensione del carattere. Una delle parti più importanti dello stile di un carattere, tuttavia, è impostare la famiglia di caratteri, ovvero lo stile utilizzato dal testo in una pagina web.
Impostare la famiglia di caratteri utilizzata dal testo su un pagina web, puoi usare la proprietà font-family. La sintassi per la proprietà font-family è la seguente:
La proprietà font-family accetta un singolo font o un elenco di font. Se specifichi più di un carattere, devi separare ogni carattere con una virgola.
L’ordine in cui vengono visualizzati i caratteri è l’ordine in cui il browser tenterà di applicare i caratteri. Il browser utilizzerà per impostazione predefinita il primo carattere nell’elenco che è installato o può essere scaricato dal browser web. Se quel carattere non è disponibile, verrà utilizzato il secondo carattere e cosi via.
è importante notare che la proprietà font-family selezionerà un font per ogni carattere in un blocco di testo. Quindi, se un particolare carattere non è disponibile in un font, il font successivo nel tuo font l’elenco delle famiglie verrà provato, finché non sarà possibile trovare un carattere adatto.
Quando utilizzi la proprietà font-weight, è meglio includere almeno un nome di famiglia di font generico (come serif, sans-serif o monospace). Ciò garantisce che se un altro carattere nell’elenco non è disponibile, il browser sarà comunque in grado di selezionare un carattere per il testo in una pagina Web da visualizzare.
Ci sono due modi in cui puoi può usare la proprietà font-family. Innanzitutto, puoi utilizzare la proprietà per specificare un carattere personalizzato per una pagina web. In secondo luogo, è possibile utilizzare la proprietà per applicare una famiglia di caratteri generici al testo di una pagina Web. Le famiglie di font generiche disponibili per l’uso con la proprietà font-family sono le seguenti:
serif: i caratteri utilizzano il carattere serif (es. Lucida Bright, Palladio).
sans-serif: i caratteri usano il carattere sans-serif (es. Open Sans, Trebuchet MS).
monospace: i caratteri hanno tutti la stessa larghezza (es. monospace, Menlo).
corsivo: i caratteri hanno un tratto di congiunzione (es. Lucida Calligraphy).
fantasy: caratteri decorativi usati per attirare l’attenzione sui caratteri (es. Papyrus).
Ora che conosciamo le basi della proprietà font-family, possiamo esaminare alcuni esempi di come funziona in azione.
Esempi di famiglie di caratteri CSS
Ci è stato chiesto da un club di francobolli locale, il Seattle Stamp Club, di personalizzare i caratteri di alcune parti del loro sito web.
Per prima cosa, ci è stato chiesto di cambiare il carattere di tutte le intestazioni
nella loro pagina "Contatti" per utilizzare il carattere "Open Sans". Quindi , ad esempio, l’intestazione "Contattaci" nella pagina "Contattaci" del loro sito Web dovrebbe apparire in Open Sans. Se tale carattere non è disponibile, dovrebbe essere utilizzata la famiglia generica "sans-serif". Potremmo usare il seguente codice per eseguire questa operazione:
Fai clic supulsante nell’editor di codice sopra per vedere l’output del nostro codice HTML/CSS.
Nel nostro codice HTML, abbiamo specificato un’intestazione utilizzando un
tag che contiene il testo Contattaci. Quindi, nel nostro codice CSS, abbiamo utilizzato la famiglia di caratteri per definire il carattere del
elementi sulla nostra pagina web.
Il valore che abbiamo assegnato alla proprietà font-family imposta il carattere di tutti i
elementi in Open Sans e, se quel font non è disponibile, viene utilizzata la famiglia generica sans-serif. Per ottenere ciò, abbiamo specificato due caratteri, separati da una virgola.
Ora, supponiamo di voler applicare anche uno stile a tutti i caratteri
elementi nella pagina Contatti del club di francobolli per utilizzare il carattere Times. Se quel font non è disponibile, dovrebbe essere usato un font serif predefinito. Potremmo utilizzare il seguente codice per eseguire questa operazione:
Fai clic supulsante nell’editor di codice sopra per vedere l’output del nostro codice HTML/CSS.
Nel nostro esempio, abbiamo dichiarato un paragrafo di testo utilizzando un
etichetta. Quindi, impostiamo la famiglia di caratteri di tutti i
tag nel nostro foglio di stile CSS per utilizzare i caratteri Times e serif. Per impostazione predefinita, il browser proverà a visualizzare tutti i
tag nel carattere Times. Se questo carattere non è disponibile, viene utilizzato il carattere serif.
Conclusione
La proprietà CSS font-family consente di specificare lo stile del testo in una pagina Web. Ad esempio, è possibile utilizzare la proprietà font-family per utilizzare la proprietà "Arial" font, o il font generico "corsivo" per tutto il testo di una pagina web.
Questo tutorial ha discusso, con riferimento ad esempi, le basi della proprietà CSS font-family e come puoi usarlo per modellare il testo su una pagina Web. Ora sei pronto per iniziare a utilizzare la proprietà della famiglia di caratteri come un web designer esperto!
pulsante nell’editor di codice sopra per vedere l’output del nostro codice HTML/CSS.
pulsante nell’editor di codice sopra per vedere l’output del nostro codice HTML/CSS.