Proprieta font nei CSS. Come personalizzare o modificare testo in un sito web.

CSS Font è un insieme di proprietà per controllare l'aspetto di testo delle pagine web. Utilizzando diversi tipi di carattere per le intestazioni, paragrafi, e altri elementi, è possibile specificare un particolare stile di comunicazioni scritte trasmettendo le vostre emozioni e l'umore.

Tuffandosi  nel mare di varietà di tipi di caratteri, non bisogna dimenticare che il testo di una pagina web  principalmente prima di tutto dovrebbe essere leggibile. Non utilizzare più di due tipi di caratteri su una pagina, e il contrasto desiderato può essere raggiunto mediante la combinazione di diverso peso, stile, dimensione di caratteri, nonché colore .

Principali proprieta di un font in CSS

1.  Famiglia di font:  font-family

La proprietà viene utilizzata per selezionare lo stile del carattere. Dal momento che è impossibile prevedere, se sul dispositivo del utente finale sono installati  particolari tipi di caratteri che pensate di usare sul vostro sito web, si consiglia di elencare tutti i  possibili varianti dello stesso tipo di caratteri. In questo caso, il browser verificare la loro disponibilità, scorrendo le opzioni proposte. Questa proprietà si ereditata.

Importante! Se il nome del font ha spazi o simboli (come #, $,%),va racchiuso tra virgolette. Questo  garantisce  che il browser  capirà dove inizia e termina il nome del font.

Vediamo esempio di scrittura del codice CSS.

p {font-family: "Times New Roman", Georgia, Serif;}

video prevui

2. Stile di caratteri:  font-style

La proprietà  permette di selezionare uno stile per il testo shelto. La differenza tra il testo in corsivo e inclinato sta nel fatto che lo stile  corsivo riporta  piccoli cambiamenti alla struttura di ogni lettera e il testo inclinato è la versione inclinata del testo normale. La proprietà si  eredita.

Esempio di scrittura proprietà font-style nel codice

h1 {font-style: normal;}
<em>h1</em> {font-style: italic;}
h1 {font-style: oblique;}

E come apparirà sulla pagina web
Semplice testo con valore normal
Semplice testo con valore italic

Semplice testo inclinato con valore oblique

3. Opzioni di scrittura caratteri:  font-variant

La proprietà permette di visualizzare caratteri in maiuscolo. La proprietà si eredita

Esempio di scrittura proprietà font-variant nel codice

h1 {font-variant: normal;}
h1 {font-variant: small-caps;}

Il testo normale con il valore del font-variant:normal

Lo stesso testo con valore  font-variant: small-caps

4. Peso del font : font-weight

La proprietà specifica lo spessore o robustaezza del testo.

Sintassi

h1 {font-weight: normal;}
span {font-weight: bold;}
span {font-weight: bolder;}
span {font-weight: lighter;}
h1 {font-weight: 100;}

Esempio del testo con valore normal o 400

Esempio del testo con valore bold o 700

Esempio del testo con il valore  piu legero 100

Esempio del testo con il valore piu pesante  o 900

5. Dimensione del font: font-size

Specifica la dimensione (size) del testo

Sinatssi della proprietà font-size nel codice

h3 {font-size: small;}
h1 {font-size: xx-large;}, em {font-size: large;}
p {font-size: 20px;}
h3 {font-size: 120%;}

Esempio del testo con font-size small

Esempio del testo con font-size xx-large

Esempio del testo con font-size 20px

Esempio del testo con font-size 120%

 

6. Colore del testo in CSS

La proprietà specifica  colore del testo utilizzando vari sistemi di colore. La proprietà si ereditata.
Sintassi

body {color: grey;}
h1 {color: #00ff00;}
strong {color: rgb(0,0,255);}
p {color: rgb(0%,0%,100%);}
span {color: rgba(255,0,0,0.3);}
h1 {color: hsl(120,100%,50%);}
h1 {color: hsla(120,100%,50%,0.3);}

Esempio del testo color: grey;

Esempio del testo color: #00ff00;

Esempio del testo color: rgb(0,0,255);

Esempio del testo color: rgb(0%,0%,100%);

Esempio del testo color: rgba(255,0,0,0.3);

Esempio del testo color: hsl(120,100%,50%);

Esempio del testo color: hsla(120,100%,50%,0.3);

 

Vi consiglio per trovare il colore voluto, almeno nel browser mozilla, utilizzando un Plugin che si chiama Color Zilla che si possa installare direttamente sul browser

7. Scrittura abbreviata delle proprietà font .

La proprietà font include  tutte le proprietà del testo utilizzati sulla pagina web. Se qualche valore non è necessario allora  viene omesso.

Sinatssi della scrittura abbreviata e la sequenza consigliata per le  proprietà font

font: font-style font-variant font-weight font-size/line-height font-family

p {font: italic bold 14px/1.5 Times, 'New Century Schoolbook', serif;}

 

 

 
Letto 1451 volte