Stile Caratteri - EINAUDI

Proprietà css ‘font’: lo stile css dei caratteri
La proprietà css font permette di raggruppare tutte le proprietà del testo in una unica dichiarazione
nel seguente ordine, separate da un spazio o da una virgola tra le differente valore per la famiglia
del font:
font-style font-variant font-weight font-size font-family
Il ‘font-family’
La proprietà css ‘font-family’ specifica la famiglia del carattere da usare per il nostro testo. Può
contenere come valore più nomi specifici (es:arial) e/o nomi di famiglia generica (es:serif).
Di buona regola, meglio specificare più valori, separati da una virgola e in ordine di preferenza,
aggiungendo per ultimo, un nome generico.
Nel caso il primo font impostato non è installato sul sistema del utente, il browser passerà al
secondo valore e cosi via per tutti i valori, fino a trovare uno giusto da utilizzare o usando un font di
default appartenendo alla famiglia generica specificata.
Esempio di regola css:
font-family: Times, "Times New Roman", Palatino, serif;
Un paragrafo con font-family:Times, “Times New Roman”, Palatino, serif;
Nota bene che i nomi di font composti da più parole, come nel caso di Times New Roman, vengono
inseriti tra quote. Es:"Times New Roman"
Il ‘font-size’
La proprietà css ‘font-size’ permette di precisare la misura dei caratteri in modo assoluto di
dimensione fissa con parole chiave (da xx-small a xx-large) ed unità di misura (le più diffuse
essendo in pixel/px per l’uso online e point/pt per l’uso in stampa) o in modo relativo alle
dimensione del testo dell’elemento genitore con parole chiave (smaller, larger) ed in percentuale (%
o em, utile per avere un font ridimensionabile alle preferenze del utente).
1.
Valore assoluto con parole chiave, in ordine di grandezza dal più piccolo (xx-small) al più
grande (xx-large):
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
Lo stile css dei caratteri
1
1.
Valore assoluto in unità di misura pixel:
font-size: 24px;
2.
Valore relativo con parole chiave smaller (più piccolo) e larger (più grande):
font-size: smaller;
font-size: larger;
3.
Valore relativo in percentuale con % e em (Nota che 100%=1em):
font-size: 2em;
font-size: 200%;
Il ‘font-style’
La proprietà css font-style permette di impostare lo stile del carattere in modo italico o no.
normal: il valore di default, utile per azzerare un altro valore preimpostato
italic: per un carattere in italico (corsivo)
Un paragrafo con font-style :italic;
Il ‘font-weight’
La proprietà css font-weight permette di specificare la consistenza visiva del carattere in modo
assoluto con parole chiave (bold) o valori numerici definiti (da 100 a 900) o in modo relativo al
testo del suo elemento genitore con parole chiave (bolder e lighter).
normal: il valore di default, utile per azzerare un altro valore preimpostato. Nota che il
valore normale è pare al valore numerico 400.
Valore assoluto con parole chiave ‘bold’. Nota che il valore bold è pare al valore numerico
700.
Un paragrafo con font-weight:bold;
Valori assoluti numerici da 100 a 900:
Un paragrafo con font-weight:100;
Un paragrafo con font-weight:200;
Un paragrafo con font-weight:300;
Un paragrafo con font-weight:400; pare al valore ‘normal’
Un paragrafo con font-weight:500;
Un paragrafo con font-weight:600;
Lo stile css dei caratteri
2
Un paragrafo con font-weight:700; pare al valore ‘bold’
Un paragrafo con font-weight:800;
Un paragrafo con font-weight:900;
Valori relativi con parole chiave ‘bolder’ (più pesante) e ‘lighter’ (meno pesante):
Un paragrafo con font-weight:bolder;
Un paragrafo con font-weight:lighter;
Il ‘font-variant’
La proprietà css font-variant con il suo valore ‘small-caps’ converte i caratteri minuscoli in caratteri
maiuscoli ma conservando la loro altezza originale.
Nota: per rendere un testo completamente in maiuscolo, usare la proprietà del testo text-transform
con il valore ‘uppercase’.
normal: il valore di default, utile per azzerare un altro valore preimpostato
small-caps
UN PARAGRAFO CON FONT-VARIANT:SMALL-CAPS;
Generatore di css per il testo
Il ‘Font-Color’
La proprietà che permette di impostare il colore del font è font-color , seguita da un colore come ad
esempio red per il rosso, white per il bianco, black per il nero, usando il codice esadecimale come
ad esempio #999999 per il grigio o i suoi valori RGB
Il ‘Text-align’
E’ la proprietà che permette di definire l’allineamento di un testo. Può assumere i seguenti valori:
right;
left;
center;
justify.
La proprietà text-align si applica solo agli elementi HTML di tipo blocco. Gli elementi in linea
seguono l’allineamento del blocco in cui sono inseriti.
‘line-height’ (interlinea)
Il line-height specifica l'
altezza di linea del testo, definendo così implicitamente la spaziatura tra
due linee di testo successivo. La proprietà line-height accetta valori specificati in tutte le unità di
misura, ma i modi più diffusi per specificarlo sono sostanzialmente px, %, em e numeri puri.
Procediamo ora con vedere un semplice esempio. La seguente regola specifica un line-height di 18
pixel per tutti i paragrafi:
p {line-height: 18px}
Lo stile css dei caratteri
3
Utilissimo il fatto che la proprietà line-height possa essere inclusa nello shorthand font. Dopo il
font-size, basterà riportare una slash / e il line-height. Vediamo un esempio:
p {font:12px/150% Arial, sans-serif}
In questo caso quindi viene definito un font-size di 12 pixel e un line-height del 150% del font-size,
che risulterà quindi 18 pixel.
Text-indent (rientri)
Se vogliamo rientrare il testo rispetto al margine, possiamo usare la proprietà text-indent, seguita da
un valore numerico con le solite unità di misura.
p {text-indent: 8px}
http://www.maniegrafiche.it/css-text/index.php
Lo stile css dei caratteri
4