In questa lezione affronteremo i seguenti argomenti:
• Approfondire le opzioni avanzate per gestire la tipografia in CSS3.
• Utilizzare Web Fonts per una varietà di stili tipografici.
• Esplorare effetti di testo come ombre e trasformazioni.
• Imparare a gestire la spaziatura del testo con line-height e letter-spacing.
Utilizzo di Web Fonts
Web Fonts consentono di utilizzare tipi di carattere personalizzati sulle pagine web.
È possibile incorporare font personalizzati o utilizzare servizi come Google Fonts.
/* Incorporazione di un font personalizzato */
@font-face {
font-family: 'MioFont';
src: url('percorso/font.woff2') format('woff2');
}
body {
font-family: 'MioFont', sans-serif;
}
Effetti di Testo
- ombre possono essere aggiunte con la proprietà text-shadow.
- trasformazioni consentono di applicare rotazioni, scalature e inclinazioni al testo.
/* Aggiunta di ombra al testo */
.text-shadow {
text-shadow: 2px 2px 4px #333;
}
/* Trasformazione del testo (esempio: maiuscolo) */
.text-transform {
text-transform: uppercase;
}
Line-height e Letter-spacing
- la proprietà line-height regola l'altezza di riga, influenzando la spaziatura verticale del testo.
- letter-spacing controlla la spaziatura tra le lettere.
/* Impostazione della line-height */
.paragraph {
line-height: 1.5; /* Esempio: 1.5 volte l'altezza del carattere */
}
/* Aumento della spaziatura tra le lettere */
.letter-spacing {
letter-spacing: 2px;
}
Attività Pratica
- Scegliere e incorporare un font personalizzato o utilizzare un servizio di Web Fonts.
- Applicare effetti di testo come ombre e trasformazioni a diversi elementi.
- Sperimentare con line-height e letter-spacing per migliorare la leggibilità.