CSS Font
Usa le proprietà CSS font per stilizzare il testo, impostarne la dimensione, il grassetto e la famiglia di caratteri. Impara gli stili CSS font.
La tipografia è una delle prime cose che un lettore nota su una pagina, e CSS ti offre un controllo dettagliato su di essa. Le proprietà CSS font definiscono il carattere tipografico (famiglia di caratteri), la dimensione, il peso (grassetto) e lo stile (ad esempio il corsivo) del testo.
Questo capitolo introduce ciascuna proprietà font individuale, mostra un esempio eseguibile per ognuna, e poi spiega la proprietà shorthand font che consente di impostarle tutte in un'unica dichiarazione.
La proprietà CSS font è una shorthand che combina diverse proprietà font. Qui spiegheremo le singole proprietà che la compongono:
Quando si aggiunge testo o link a una pagina web, li stilizziamo usando queste proprietà. Esploriamole in dettaglio.
Font Family
Usiamo la proprietà font-family per specificare il carattere tipografico del testo. Essa definisce il nome del font utilizzato nella pagina web.
CSS Font
p {
font-family: Arial, sans-serif;
}Come si può vedere, abbiamo applicato la proprietà font-family al tag <p>. Distinguiamo due tipi di famiglie:
- famiglia generica - un gruppo di famiglie di font con un aspetto simile (come "Serif" o "Sans-serif")
- famiglia di font - una particolare famiglia di font (come "Times New Roman" o "Arial")
Quando il nome di una famiglia di font è composto da più di una parola, racchiuderlo tra virgolette (ad es., "Times New Roman"). È inoltre consigliato fornire una famiglia di font di riserva 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ù comunemente usati per la proprietà font-style sono:
normal, che mostra il testo normalmente,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 testo avrà 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 padre (spesso 16px per impostazione predefinita). I pixel (px) sono l'unità di misura più comunemente utilizzata.
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>Dovresti verificarlo anche tu stesso. Puoi farlo con il nostro editor HTML online clicca qui.
Font Variant
La proprietà font-variant consente di impostare il testo su normale o maiuscoletto.
Il valore small-caps converte le lettere minuscole in maiuscole, ma le visualizza a una dimensione più piccola rispetto alle lettere 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 come rendere il testo normale più grassetto, poiché le intestazioni sono in grassetto per impostazione predefinita.
Usiamo la proprietà font-weight per questo scopo.
I valori più comunemente usati per la proprietà font-weight sono:
normalbold
I valori possono essere specificati anche 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, e 700 corrisponde a bold. Man mano che il numero aumenta da 100 a 900, il font diventa più grassetto.
La shorthand font
Invece di scrivere ogni proprietà su una riga separata, puoi impostarle tutte in una sola volta con la shorthand font. Questo mantiene il foglio di stile più breve e raggruppa le dichiarazioni correlate.
L'ordine dei valori è importante. La sintassi è:
font: font-style font-variant font-weight font-size/line-height font-family;Alcune regole da ricordare:
font-sizeefont-familysono obbligatorie. Se una delle due manca, l'intera dichiarazione viene ignorata.font-style,font-variantefont-weightsono opzionali e devono comparire prima difont-size.line-heightè opzionale e va scritto dopofont-size, separato da una barra (/).- Qualsiasi valore omesso viene reimpostato al suo valore predefinito, quindi la shorthand è un modo comodo per cancellare dichiarazioni longhand precedenti.
Ecco lo stesso paragrafo stilizzato con le proprietà longhand e poi con la shorthand:
/* Longhand */
p {
font-style: italic;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
font-family: Georgia, serif;
}
/* Equivalent shorthand */
p {
font: italic bold 18px/1.5 Georgia, serif;
}Per ulteriori dettagli ed esempi, consulta il capitolo font.