Font in CSS
Usa le proprietà CSS dei font per dare stile al testo, impostarne la dimensione, lo spessore e la famiglia. Scopri come usare gli stili dei font in CSS.
In questo capitolo parleremo dei font.
Le proprietà CSS dei font si usano per definire la dimensione, la famiglia, lo spessore e lo stile del testo.
La proprietà CSS font è uno shorthand che combina diverse proprietà dei font. Qui spiegheremo le singole proprietà che la compongono:
Quando aggiungiamo testo o link a una pagina web, li stilizziamo usando queste proprietà. Esaminiamole nel dettaglio.
Font Family
Usiamo la proprietà font-family per specificare il font del testo. Definisce il nome del font usato nella pagina web.
Font CSS
p {
font-family: Arial, sans-serif;
}Come puoi vedere, abbiamo applicato la proprietà font-family al nostro tag <p>. Distinguiamo due tipi di famiglie:
- famiglia generica - un gruppo di famiglie di font dall'aspetto simile (come "Serif" o "Sans-serif")
- famiglia di font - una famiglia di font specifica (come "Times New Roman" o "Arial")
Quando il nome di una famiglia di font è composto da più di una parola, racchiudilo tra virgolette (ad esempio "Times New Roman"). È inoltre consigliabile indicare una famiglia di font di riserva (fallback) nel caso in cui il browser non supporti la prima.
Font Style
Usiamo la proprietà font-style principalmente per visualizzare il testo in corsivo.
I valori più usati per la proprietà font-style sono:
normal, che mostra il testo in modo normale,italic, che visualizza il testo in corsivo,oblique, che "inclina" il testo.
Esempio della proprietà font-style:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-style:normal">This is paragraph with font-style property with normal value.</p>
<p style="font-style:italic">This is paragraph with font-style property with italic value.</p>
<p style="font-style:oblique">This is paragraph with font-style property with oblique value.</p>
</body>
</html>Per impostazione predefinita il nostro testo sarà font-style: normal, anche senza scrivere questo valore.
Font Size
Usiamo la proprietà font-size per impostare la dimensione del testo.
I valori possono essere specificati in pixel, punti, em, rem, ecc. Puoi trovare l'elenco completo nella sezione font-size. Nota che 1em equivale alla dimensione del font calcolata dell'elemento genitore (spesso 16px per impostazione predefinita). I pixel (px) sono l'unità più usata.
Esempio della proprietà font-size:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3 style="font-size:40px;"> Some heading with font-size property.</h3>
<p style="font-size:25px;"> Some paragraph with font-size property.</p>
<a style="font-size:2em;"> Some link with font-size property.</a>
</body>
</html>Devi verificarlo anche di persona. Puoi farlo con il nostro editor HTML online clicca qui.
Font Variant
La proprietà font-variant ti permette di impostare il testo su normal o small-caps.
Il valore small-caps converte le lettere minuscole in maiuscole, ma le visualizza con una dimensione inferiore rispetto alle maiuscole originali.
Esempio della proprietà font-variant:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">But We Used A Text With Small-Caps Here.</p>
</body>
</html>Font Weight
Ora impariamo a rendere il testo normale più in grassetto, dato che i titoli sono già in grassetto per impostazione predefinita.
Per questo usiamo la proprietà font-weight.
I valori più usati per la proprietà font-weight sono:
normalbold
I valori possono anche essere specificati come numeri.
Esempio della proprietà font-weight:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-weight:900">Some paragraph with the font-weight property with value bold.</p>
<p style="font-weight:normal">Some paragraph with the font-weight property with value normal.</p>
<p style="font-weight:bold">Some paragraph with the font-weight property with value bold.</p>
</body>
</html>Come accennato, i valori numerici vanno da 100 a 900. Il valore 400 corrisponde a normal, mentre 700 corrisponde a bold. Man mano che il numero aumenta da 100 a 900, il font diventa più in grassetto.