Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Font e css

Font e css

di GDesign, 04 Giugno 2002

Versione StampabileDownload in pdf


I fogli di stile CSS ci permettono di controllare diverse proprietà dei font su cui con l'Html semplice non si ha alcun controllo, come l'interlinea, lo spazio tra le lettere di una parola e l'indentazione della prima riga di testo di un paragrafo. Il supporto dei browser per queste proprietà può presentare molte differenze, quindi è sempre consigliabile collaudare con cura il proprio lavoro per assicurarsi una visualizzazione corretta sulla maggior parte dei browser. Le proprietà dei font che si possono controllare con i CSS, sono più di 50, ma in questo articolo ci soffermeremo su quelle più utilizzate come: Font-Family, Font-Size, Font-Weight, Line-Height, Letter-Spacing, Text-Indent e Color.

Font-Family

La proprietà Font-Family ci consente di specificare la famiglia di font. Supponiamo di voler utilizzare il font Verdana per l'elemento <P>:

<STYLE TYPE="text/css">
P {FONT-FAMILY: VERDANA}
</STYLE>

In questo modo tutti i paragrafi della pagina utilizzeranno il Verdana come font per il testo. Ricordatevi che è necessario che gli utenti abbiano installato sul proprio computer il font da voi specificato altrimenti il browser lo sostituirà con il font standard. È consigliabile allora specificare dei font alternativi che il browser tenterà di caricare in successione:

<STYLE TYPE="text/css">
P {FONT-FAMILY: VERDANA, ARIAL}
</STYLE>

Questo codice chiede al browser di usare il font Verdana; se il font Verdana non è presente sul sistema dell'utente, si deve usare il font Arial.

Per garantire una migliore omogeneità su più browser e sistemi operativi si può specificare un nome generico. Ad esempio con il codice:

<STYLE TYPE="text/css">
P {FONT-FAMILY: VERDANA, ARIAL, SANS-SERIF}
</STYLE>

si dice al browser che se i font Verdana e Arial non sono disponibili deve essere utilizzato un font Sans-serif, vale a dire un font senza grazie. Le famiglie di font generiche che si possono specificare sono:

Font-Size

La proprietà FONT-SIZE ci consente di specificare le dimensioni dei font utilizzando una delle unità di misura tra quelle supportate dai fogli di stile CSS. Vediamo, allora, quali sono le unità di misura CSS:

Unità di misura CSS

Con la sintassi:

<STYLE TYPE="text/css">
P {FONT-FAMILY: VERDANA, ARIAL; FONT-SIZE: 14px}
</STYLE>

diciamo al browser di utilizzare per i paragrafi caratteri Verdana o Arial con una dimensione di 14 pixel.

Specificare le dimensioni dei caratteri in questo modo significa bloccare i caratteri; quindi per i vostri utenti non sarà possibile ingrandire il testo sfruttando l'apposita funzione dei browser. Bloccare i caratteri, per i sostenitori dell'usabilità, è considerata un'eresia, ma a volte può risultare molto comodo e dare buoni risultati. In ogni caso, se decidete di bloccare i caratteri, il consiglio è di esprimere le dimensioni in pixel e non in punti, perché i pixel sono uguali dappertutto al contrario dei punti che a seconda della piattaforma potrebbero essere o troppo grandi o troppo piccoli rispetto a quanto desiderato.

Font-Weight

La proprietà FONT-WEIGHT consente di specificare un valore numerico o descrittivo riguardante il peso dei caratteri. I valori più usati sono: normal, bold, bolder e lighter. Questi valori vanno però sperimentati perché non sono disponibili per tutti i font (ad eccezione di bold che è quasi sempre disponibile). Se vogliamo che il testo dei paragrafi delle nostre pagine sia Verdana grassetto a 14 pixel la sintassi da usare è:

<STYLE TYPE="text/css">
P {FONT-FAMILY: VERDANA; FONT-SIZE: 14px; FONT-WEIGHT: BOLD}
</STYLE>

Line-Height

Grazie ai fogli di stile CSS è possibile specificare una percentuale o un valore assoluto di interlinea. La percentuale si basa sulla dimensione dei font, nel senso che, se impostiamo un valore pari a 200% per un font di 10 pixel, otterremo un'interlinea di 20 pixel. Come valori assoluti possiamo usare una qualsiasi delle unità di misura riconosciute dai fogli di stile CSS. Ad esempio con la sintassi:

<STYLE TYPE="text/css">
P {LINE-HEIGHT: 20px}
</STYLE>

creiamo un'interlinea di 20 pixel.

Letter-Spacing

La regolazione dello spazio che separa le lettere di una parola è il kerning. Con la proprietà LETTER-SPACING si imposta il kerning usa utilizzando una qualsiasi delle unità di misura. Per ottenere una spaziatura fra le lettere di 2 punti la sintassi è:

<STYLE TYPE="text/css">
P {LETTER-SPACING: 2pt}
</STYLE>

Text-Indent

Utilizzando la proprietà TEXT-INDENT possiamo impostare il livello di indentazione della prima riga di testo di un paragrafo. Ad esempio:

<STYLE TYPE="text/css">
P {TEXT-INDENT: 18px}
</STYLE>

definisce un'indentazione di 18 pixel. Possiamo utilizzare anche un valore negativo per ottenere una prima riga sporgente.

Color

La proprietà COLOR definisce il colore del testo di un elemento. Si possono specificare i nomi dei colori oppure i valori esadecimali. Per ottenere un paragrafo con il testo di colore bianco basta scrivere:

<STYLE TYPE="text/css">
P {COLOR: #FFFFFF}
</STYLE>

^Top

Dai un voto a questo articolo:   HITS: 148 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 3