Font e CSS
| font-family |
Come e' lecito aspettarsi, i fogli di stile permettono una maggiore padronanza della formattazione del testo rispetto ad HTML classico, ed anche una gamma piu' ampia di attributi applicabili allo stesso. Per maggiore praticita' negli esempi a seguire adotteremo gli stili in linea, tenendo presente che sono tutti utilizzabili anche applicati al tag BODY, come del resto la quasi totalita' dei CSS stessi:
<BODY STYLE="font ...stile...">
oppure incorporati:
<STYLE>
BODY {font ...stile...}
</STYLE>
Cominciamo con l'attributo 'family' e i suoi corrispondenti valori:
<FONT STYLE="font-family: courier">Testo di esempio</FONT>
Dara' questo risultato: Testo di esempio
E' comunque buona norma impostare piu' di un font:
<FONT STYLE="font-family: comic sans ms,courier,verdana">Testo di esempio</FONT>| font-size |
Il codice sotto mostra come stabilire le dimensioni del font, che prevarica ampiamente l'attributo SIZE di HTML.
<FONT STYLE="font-family:verdana; font-size:30px">Attributo 'size'</FONT>Ecco come appare il testo interessato: Attributo 'size'
Potremmo impostare addirittura il valore a 3000px, non vi sono praticamente limiti di sorta. Ma soffermiamoci un momento per prendere in considerazione le varie unita' di misura applicabili. Nell'esempio sopra abbiamo usato l'unita' px (pixel) che e' probabilmente la piu' adottata, ma vi sono altri quattro tipi di impostazione. Prendiamoli tutti in esame:
px : ossia pixel.
cm : centimetri, ovviamente.
pt : abbreviazione di point, un pt equivale ad 1/72 di pollice.
in : abbreviazione di inch, pollice. Un pollice equivale a 25,4 millimetri.
Questi quattro metodi si riferiscono ad una dimensione assoluta del font, sono indipendenti sia dalla risoluzione del monitor, sia dalla dimensione che il browser utilizza di default. La misura sotto agisce invece proprio in base alla preimpostazione del browser:
font-size:200% raddoppiera' le dimensioni preimpostate.
Analogamente all'impostazione relativa (come quella in percentuale) abbiamo a disposizione un altro paio di attributi:
'font-size: smaller', equivalente al tag <SMALL>
'font-size: larger', che svolge la stessa funzione di <BIG>
In realta' esistono altri attributi per modificare le dimensioni del testo, in realta' assai poco usati. Comunque, a chi sia interessato alle specifiche complete CSS2, si veda il sito ufficiale del W3C (in lingua inglese).
| font-style |
Questi tre attributi permettono di variare lo stile del testo e benche' come altri stili, possano sembrare superflui, non bisogna dimenticare che l'utilizzo primario dei CSS dovrebbe essere la collocazione degli stessi in un file esterno, influenzando cosi' un numero virtualmente infinito di pagine web.
'font-style: italic', analogo al tag <I>
'font-style: oblique', ha la stessa funzione del tag <I>, ma non carica un altro font come fa invece l'attributo precedente.
'font-style: normal', neutralizza l'effetto degli attributi sopra.
Non bisogna comunque tralasciare un attributo importante, svolgente lo stesso compito che HTML classico affida al tag <B>:
'font-weight: bold'.
In realta' le specifiche ufficiali (12 maggio 1998) descrivono una quantita' di valori da affidare all' attributo 'weight', purtroppo non supportate nemmeno dai browser piu' recenti (Netscape 7 e Internet Explorer 6).
Infine, mostriamo una 'scorciatoia' per assegnare la dimensione, il 'peso' ed il tipo di font:
<FONT STYLE="font: bold 16px verdana">Testo di esempio</FONT>
Ecco il risultato: Testo di esempio
Si tenga presente che deve essere rispettato l'ordine weight-size-family.
© 2002 Poletti Stefano