Qualche settimana addietro abbiamo visto il ruolo svolto dai fogli di stile CSS nel definire aspetti grafici e tipografici di una pagina HTML. Con questa guida riprendiamo l’argomento analizzando più nel dettaglio il funzionamento dei CSS rispetto agli elementi tipici di una pagina web. Cominceremo in particolare con alcuni post dedicati alla gestione del testo.
CSS, scegliere il tipo di font
Un primo aspetto di un elemento di testo che è possibile definire tramite CSS è il tipo di carattere (o font) da utilizzare. A questo scopo si impiega la proprietà font-family seguita dalle indicazioni sul tipo di carattere da utilizzare. Supponiamo ad esempio di voler definire il tipo di font da utilizzare con l’elemento ‘P’ di HTML (paragrafo di testo). Utilizzeremo una sintassi di questo tipo:
p {font-family: font-1, font-2, font-3, famiglia-font;}
La proprietà font-family così costruita indica al browser di visualizzare i paragrafi di testo utilizzando il tipo di carattere font-1. Se questo non fosse disponibile nel sistema operativo il browser utilizzerà il secondo font della lista (font-2) e via di seguito. L’ultimo elemento della lista svolge una funzione differente ed indica al browser di utilizzare il carattere predefinito appartenente ad una certa famiglia di font. Questa formulazione apparentemente sovrabbondante serve a garantire una buona rappresentazione del testo in funzione dei tipi di carattere effettivamente disponibili in ogni sistema operativo.
Famiglie di font e CSS
Per meglio comprendere quanto detto analizziamo questo spezzone di codice CSS:
h1 {font-family: "Times New Roman", Times, serif;}
h2 {font-family: "Courier New", Courier, monospace;}
p {font-family: Arial, Helvetica, sans-serif;}
Per l’elemento H1 di HTML si è scelto l’uso di font con grazie indicando due tipi di caratteri di questo tipo (Times New Roman e Times) e la famiglia che li rappresenta (serif). Osserviamo che il nome del font va racchiuso tra virgolette (“) se contiene degli spazi. Per l’elemento P di HTML il CSS dell’esempio prescrive l’uso di caratteri senza grazie (sans-serif) L’elemento H2 mostra infine l’impiego di caratteri a spaziatura fissa (monospace).