Lez.6 - Corso Base Css

Il Carattere e la Proprietà font-family in un foglio di stile Css

Il Carattere e la proprietà font-family

Il browser quando deve renderizzare, interpretare (rendering) la pagina, fra le altre cose, cerca la proprietà font-family e ne interpreta il suo valore (il valore non è altro che il tipo di carattere che noi assegniamo alla proprietà font-family).

Se anziché un solo valore noi assegnamo più di un valore alla proprietà font-family, come vediamo nella sintassi:
selettore {font-family: valore1, valore2, famiglia;}

nel momento in cui facciamo questo, il browser legge il primo valore se il carattere che abbiamo assegnato non è nella sua libreria, cerca il secondo carattere se anche questo non c'è nella sua libreria legge il terzo valore che è relativo alla famiglia dei caratteri e assegna un carattere che si assomigli alla nostra richiesta, ma sempre e comunque della famiglia da noi richiesta.

Facciamo il caso più specifico del codice che vedremo i questa lezione:
h1 {font-family: georgia, times new roman, serif;}

stiamo indicando al browser di interpretre il primo valore ( georgia), se il browser non è fornito di questo carattere gli diciamo di andare ad interpretare il secondo valore (times new roman) se non ha anche questo carattere, il browser, va a vedere il terzo valore (serif), e assegna un carattere della famiglia serif.

Nel codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Il Carattere e la proprietà font-family</title>
  <meta charset="utf-8">
  <style type="text/css">
     h1 {
        font-family: georgia, times new roman, serif;
       }
     h2 {
        font-family: arial, verdana, sans-serif;
       }
     h3 {
        font-family: curier new, lucida console, monospace;
       }   
  </style>
</head>
 <body>			    
   <h1>I carattere: georgia, times new roman, fanno parte della famiglia serif   </h1>
   <h2>I caratteri: arial, verdana, fanno parte della famiglia sans-serif</h2>
   <h3>I caratteri: curier new, lucida console, fanno parte della famiglia monospace</h3>
   <p>Paragrafo 1</p>
   <p>Paragrafo 2</p>
   <p>Paragrafo 3</p>
 </body>                
</html>