Comprensione e Utilizzo delle Proprietà dei Font
Consideriamo le proprietà più comuni relative ai font.
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
Nota
Tutti gli esempi verranno mostrati utilizzando lo stesso contenuto testuale per offrire la possibilità di osservare come lo stesso testo possa essere visualizzato in modo diverso.
font-family
La proprietà font-family definisce la famiglia o le famiglie di font che verranno utilizzate per visualizzare il contenuto testuale. È possibile specificare un singolo nome di famiglia di font oppure un elenco di più nomi di famiglie separati da virgole.
font-size
La proprietà font-size imposta la dimensione del carattere per la visualizzazione del contenuto testuale. Può essere una dimensione fissa misurata in px oppure una dimensione relativa misurata in unità em o rem.
font-weight
La proprietà font-weight determina lo spessore o il peso del carattere utilizzato per visualizzare il contenuto testuale. Può essere specificata come valore numerico (ad esempio, 300, 500, 700, ...) oppure come parola chiave (ad esempio, lighter, normal o bold).
font-style
La proprietà font-style specifica lo stile del carattere da utilizzare per il contenuto testuale. Può essere normal (valore predefinito), italic oppure oblique.
Pseudo-classe ::first-letter
La pseudo-classe first-letter seleziona e applica uno stile alla prima lettera di un paragrafo o di un'intestazione. Per utilizzare questa pseudo-classe, è necessario inserire una doppia :: dopo un selettore e aggiungere la parola chiave first-letter.
selector::first-letter {
/* some styles */
}
Eseguiamo il seguente esempio per vedere come funziona.
index.html
styles.css
Riepilogo
font-familyspecifica il font o i font di riserva per il testo. È possibile elencare più font per garantire una corretta visualizzazione;font-sizedefinisce la dimensione del testo utilizzando unità assolute (px) o relative (em, rem);font-weightcontrolla lo spessore del font, sia numericamente (100–900) sia con parole chiave comenormalobold;font-styledetermina lo stile del font, comenormal,italicooblique;- La pseudo-classe
::first-letterseleziona e applica uno stile alla prima lettera di un blocco di testo, consentendo effetti tipografici creativi.
1. Quale proprietà determina lo spessore del carattere?
2. Qual è il valore predefinito della proprietà font-style in CSS?
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you explain the difference between px, em, and rem units for font-size?
How do I choose the best font-family for my website?
Can you show examples of using the ::first-letter pseudo-class?
Awesome!
Completion rate improved to 2.56Comprensione e Utilizzo delle Proprietà dei Font
Scorri per mostrare il menu
Consideriamo le proprietà più comuni relative ai font.
selector {
font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
font-style: normal | italic | oblique; /* only these values available */
}
Nota
Tutti gli esempi verranno mostrati utilizzando lo stesso contenuto testuale per offrire la possibilità di osservare come lo stesso testo possa essere visualizzato in modo diverso.
font-family
La proprietà font-family definisce la famiglia o le famiglie di font che verranno utilizzate per visualizzare il contenuto testuale. È possibile specificare un singolo nome di famiglia di font oppure un elenco di più nomi di famiglie separati da virgole.
font-size
La proprietà font-size imposta la dimensione del carattere per la visualizzazione del contenuto testuale. Può essere una dimensione fissa misurata in px oppure una dimensione relativa misurata in unità em o rem.
font-weight
La proprietà font-weight determina lo spessore o il peso del carattere utilizzato per visualizzare il contenuto testuale. Può essere specificata come valore numerico (ad esempio, 300, 500, 700, ...) oppure come parola chiave (ad esempio, lighter, normal o bold).
font-style
La proprietà font-style specifica lo stile del carattere da utilizzare per il contenuto testuale. Può essere normal (valore predefinito), italic oppure oblique.
Pseudo-classe ::first-letter
La pseudo-classe first-letter seleziona e applica uno stile alla prima lettera di un paragrafo o di un'intestazione. Per utilizzare questa pseudo-classe, è necessario inserire una doppia :: dopo un selettore e aggiungere la parola chiave first-letter.
selector::first-letter {
/* some styles */
}
Eseguiamo il seguente esempio per vedere come funziona.
index.html
styles.css
Riepilogo
font-familyspecifica il font o i font di riserva per il testo. È possibile elencare più font per garantire una corretta visualizzazione;font-sizedefinisce la dimensione del testo utilizzando unità assolute (px) o relative (em, rem);font-weightcontrolla lo spessore del font, sia numericamente (100–900) sia con parole chiave comenormalobold;font-styledetermina lo stile del font, comenormal,italicooblique;- La pseudo-classe
::first-letterseleziona e applica uno stile alla prima lettera di un blocco di testo, consentendo effetti tipografici creativi.
1. Quale proprietà determina lo spessore del carattere?
2. Qual è il valore predefinito della proprietà font-style in CSS?
Grazie per i tuoi commenti!
