Summary  
This chapter explains how to use CSS font properties—font-family, font-size, font-weight, font-style—and the ::first-letter pseudo-class to control and decorate text appearance.

General domain of usage  
Web design

Watch this video to see how different CSS font properties—such as font-family, font-size, font-weight, and font-style—change the appearance of text on a web page. You'll also learn how the ::first-letter pseudo-class can be used for decorative effects. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

I font influenzano fortemente il tono e la leggibilità di una pagina web.
In questo capitolo vengono analizzate le proprietà CSS più comunemente utilizzate relative ai font: `font-family`, `font-size`, `font-weight` e `font-style`.


Tutti gli esempi utilizzano lo stesso testo per mostrare come queste proprietà modificano l'aspetto.

Nota

## font-family
La proprietà `font-family` definisce quale tipo di carattere viene utilizzato per visualizzare il testo.
```css
p {
  font-family: 'Montserrat', Arial, sans-serif;
}
```
È possibile elencare più font come alternative, separati da virgole. Se il primo font non è disponibile, il browser utilizza il successivo nell'elenco. Si consiglia di includere sempre una famiglia generica come: `serif`, `sans-serif`, `monospace`.

## font-size
La proprietà `font-size` controlla la dimensione del testo visualizzato.
```css
p {
  font-size: 16px;
}
```
Unità comuni: 
- `px`: dimensione fissa;
- `em`: relativa all'elemento genitore;
- `rem`: relativa all'elemento radice.

## font-weight
Controlla lo spessore del testo. Valori numerici: `100–900`. Parole chiave: `normal`, `bold`, `lighter`.

## font-style
Specifica lo stile del testo: `normal`, `italic` o `oblique`.

## Pseudo-classe ::first-letter
`::first-letter` seleziona la prima lettera di un elemento (tipicamente un paragrafo o un'intestazione), consentendo effetti decorativi o stilizzati.
```css
selector::first-letter {
 /* some styles */
}
```
Eseguiamo il prossimo esempio per vedere come funziona.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJhcnRpY2xlIj4KICAgICAgPGgyIGNsYXNzPSJ0aXRsZSI+VGhlIFBvd2VyIG9mIFN0b3JpZXM8L2gyPgogICAgICA8cCBjbGFzcz0ibGVhZCI+CiAgICAgICAgU3RvcmllcyBjb25uZWN0IHVzLiBUaGV5IHNoYXBlIGhvdyB3ZSBzZWUgdGhlIHdvcmxkLCB1bmRlcnN0YW5kIGVhY2gKICAgICAgICBvdGhlciwgYW5kIHJlbWVtYmVyIG91ciBwYXN0LiBBIHdlbGwtdG9sZCBzdG9yeSBjYW4gbW92ZSBoZWFydHMsIGNoYW5nZQogICAgICAgIG1pbmRzLCBhbmQgc3BhcmsgYWN0aW9uLgogICAgICA8L3A+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwoubGVhZDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXNpemU6IDNyZW07CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgY29sb3I6IGRhcmtyZWQ7CiAgZmxvYXQ6IGxlZnQ7CiAgbGluZS1oZWlnaHQ6IDE7CiAgcGFkZGluZy1yaWdodDogOHB4OwogIHBhZGRpbmctdG9wOiA0cHg7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogJ01lcnJpd2VhdGhlcicsIHNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmOWY5Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKfQoKLmFydGljbGUgewogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwogIGJvcmRlcjogMXB4IGRhc2hlZCBkYXJrc2FsbW9uOwogIHBhZGRpbmc6IDMwcHggMjVweDsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDJweCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKfQoKLnRpdGxlIHsKICBtYXJnaW4tdG9wOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBmb250LXNpemU6IDI0cHg7CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKLmxlYWQgewogIGZvbnQtc2l6ZTogMTZweDsKICBsaW5lLWhlaWdodDogMS43OwogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0=

`font-family` definisce il tipo di carattere e le alternative.

`font-size` controlla la dimensione del testo in px, em o rem.

`font-weight` regola lo spessore utilizzando numeri o parole chiave.

`font-style` modifica lo stile del carattere.

`::first-letter` applica uno stile alla prima lettera di un blocco di testo.

Riepilogo

Quale proprietà determina lo spessore del carattere?

Qual è il valore predefinito della proprietà `font-style` in CSS?

Apprendi le nozioni fondamentali di CSS, il linguaggio di stile che trasforma l'aspetto delle pagine web. Esplora concetti chiave come stili del testo, colori, spaziatura, box model, Flexbox ed effetti decorativi. Sviluppa le competenze necessarie per creare pagine web visivamente accattivanti e ben strutturate.

Comprendere come CSS si collega a HTML e come gli stili vengono applicati tramite i selettori. Applicazione di colori, stili del testo ed effetti hover per controllare la presentazione visiva.

Miglioramento della tipografia tramite altezza della linea, spaziatura, proprietà dei font e font personalizzati. Controllo delle famiglie di font, peso, stile e dimensione per una migliore leggibilità.

Controllo della struttura del layout tramite proprietà di margine, padding, bordi e larghezza. Comprensione del comportamento del dimensionamento del box e dei tipi di visualizzazione degli elementi come block, inline e inline-block.

Controllo dei layout orizzontali e verticali utilizzando le proprietà Flexbox. Regolazione della direzione, dell'allineamento e della spaziatura per strutturare i componenti dell'interfaccia utente.

Migliora i layout utilizzando colori di sfondo, immagini, pseudo-elementi e ombre. Stile dei componenti visivi per profondità e contrasto.

Lavorare con i Font e le Proprietà dei Font

font-family

font-size

font-weight

font-style

Pseudo-classe ::first-letter

1. Quale proprietà determina lo spessore del carattere?

2. Qual è il valore predefinito della proprietà `font-style` in CSS?