I fogli di stile permettono una maggiore padronanza della formattazione del testo rispetto all’HTML, e contestualmente offrono anche una gamma più ampia di attributi applicabili di cui da tempo l’HTML soffriva la mancanza.
Per dare un’idea immediata di come queste prorietà modifichino la formattazione del testo, negli esempi a seguire verrà utilizzata la formattazione in linea; ricordo tuttavia, che la stessa formattazione, inserita in un foglio di stile e associata con appositi tag ID o tramite classi, permette di applicare la formattazione agli oggetti interessati.
Attributo family
Cominciamo con l’attributo ‘family’ e i suoi corrispondenti valori: la proprietà Font-Family ci consente di specificare la famiglia di font.
Supponiamo di voler utilizzare il font Garamond per un paragrafo intero, come quello che state leggendo.
Per ottenere il risultato sopra mostrato, si è inserito una cosa di questo tipo:
<p style="font-family: Garamond, sans-serif;">Testo</p>E’ comunque buona norma impostare piu’ di un font, ed in particolare utilizzarne almeno uno generico tipo il sans-serif, da posizionarsi sempre come ultimo font della lista. Questo perchè se i font specificati non sono disponibili sul computer dove la pagina HTML sta per essere visualizzata, almeno si avrà la certezza che il font di default, comunque sempre presente nel sistema operativo, verrà utilizzato per la visualizzazione della pagina stessa. Si ricorda inoltre che nel caso si vogliano utilizzare font il cui nome è composto da più di una parola, il nome del font deve essere racchiuso tra i doppi apici.
Abbiamo poi la proprietà font-size, che si preoccupa di impostare le dimensioni del carattere del font, e che ricordo ha maggior valenza rispetto all’attributo SIZE dell’HTML. Questo significa che se nella porzione di codice HTML dove viene modificato via CSS la dimensione del font esiste anche il size dell’HTML, questo verrà praticamente ignorato.
Attributo size
Con il CSS le dimensioni del font consento di impostare valore estremamente più precisi e di gran lunga superiori al tradizionale size HTML.
<font style="font-family:verdana; font-size:15pt;" size="50";>Attributo size</font>Ma soffermiamoci un momento per prendere in considerazione le varie unità di misura applicabili. Nell’esempio sopra è stato usato il point (pt) che é la misura largamente più adottata, ma vi sono altre unità di misura a disposizione. La scelta sta tutta a chi disegna la pagina, ma andrebbe comunque seguita per definizione una regola generale, che in questo esempio non è stata presa in considerazione. Sto parlando della possibilità intrinseca che la misura offre di essere ridimensionata, mantenendo le sue proporzioni. Detto questo, tanto il pixel (px) o il point (pt) sono unità di misura fisse che non consentono un corretto ridimensionamento e non andrebbero mai utilizzate per per le dimensioni del testo. E’ un pò come voler misurare il peso di un oggetto in centimetri.
Il motivo di questo specifica, dettata peraltro anche dal W3C, è che alcuni utenti con particolari problematiche visive, piuttosto che utenti che vogliono poter leggere senza per questo dover essere succubi delle dimensioni di testo impostate dai programmatori, devono, senza per questo sconbussolare il layout grafico del sito che consultano, poter allargare o stringere il testo a loro piacimento. Le misure corrette da utilizzare sarebbe quindi la percentuale (%) o la dimensione originale del font stesso (em). Detta regola, ovviamente, non vale quando si sta realizzando un foglio di stile per le pagine il cui output sarà la stampante, dove è d’obbligo l’uso di una dimensione fissa tipo il pixel o il point.
Un grado generale di tutte le unità di misura:
px : ossia pixel, unità fissa; cm : centimetri, unità fissa; **pt **: abbreviazione di point, un pt equivale ad 1/72 di pollice, unità fissa; in : abbreviazione di inch, pollice. Un pollice equivale a 2,54 centimetri, unità fissa; % : percentuale, unità relativa; em : altezza naturale del font, unità relativa; en : metà dell’altezza naturale del font, unità relativa;
In realtà esistono altri attributi per modificare le dimensioni del testo, poco usati e che invito a leggere attraverso sito ufficiale del W3C (in lingua inglese).
Lo stile del carattere. Sarà spesso capitato di scrivere del testo in corsivo, e la proprietà font-style serve ad impostare proprio questa sua caratteristica. Così mettendo un italic il testo verrà scritto in corsivo. Esiste anche un’altra proprietà, oblique, che è molto simile all’italico e per questo la rende praticamente inutilizzata. Di fatto l’oblique dovrebbe tentare, nel limite del possibile, di mettere in posizione italica un font, utilizzando comunque il font base, senza per questo caricare la versione specifica, “risparmiando memoria”. Data la velocità dei moderni calcolatori, questo risparmio è praticamente invisibile.
Tuttavia, per chi ha un pò di familiarità con i font, avrà certamente notato che un font è spesso accompagnato da più di un file; questo perchè ad ogni file corrisponde una versione del carattere, quindi normale, italico, grassetto ecc. Durante il normale utilizzo delle applicazioni che si servono dei font, all’uopo viene caricata la versione corretta del carattere; questo è quello che succede anche con le pagine HTML. L’uso di oblique serve ad evitare questo ulteriore caricamento. Il valore di default della proprietà font-style è normal, che specificato o meno, lascia il testo invariato, così come il True-Type è stato realizzato.
Attributo font-weight
Concludiamo con il peso di un font, la cui proprietà CSS è font-weight. Serve a definire la consistenza o il peso visivo del testo. Si applica a tutti gli elementi ed è ereditata.
Il peso di un carattere può essere espresso con una scala numerica o con parole chiave. I valori numerici vanno dal 100 al 900, ordinati in senso crescente (dal leggero al pesante). Mentre le parole chiave possono assumere il valore di normal, valore di default, il cui valore è pari a 400 e bold, che consente al carattere di acquistare l’aspetto che definiamo con la parola grassetto, e il cui valore equivale a 700. Abbiamo poi due ulteriori parole chiave, di tipo relativo, che consentono ad una determinata porzione di testo parente di apparire rispettivamente più pesante o più leggero. Queste parole chiave sono bolder o lighter.
Le differenze durante l’uso di bolder e lighter sono spesso minime, che difficilmente si può notare la differenza e in alcuni casi non supportate (vedi lighter in IE 6). Tuttavia sebbene poco utili, almeno dal mio punto di vista, non potevo ometterle dalla spiegazione.