Caratteri di CSS

L'attributo di carattere CSS definisce la famiglia di caratteri, la dimensione, il grassetto, lo stile (come l'italicizzazione) e la trasformazione (come le minuscole maiuscole) del testo.

Serie di CSS

In CSS ci sono due tipi diversi di nomi di serie di font:}

  • Serie di font universali - combinazione di sistemi di font con un aspetto simile (ad esempio, "Serif" o "Monospace")
  • Serie di font specifici - serie di font specifici (ad esempio, "Times" o "Courier")

Oltre a vari tipi di serie di font specifici, CSS definisce 5 serie di font universali:

  • Font Serif
  • Font Sans-serif
  • Font Monospace
  • Font Cursivo
  • Font Fantasy

Per ulteriori informazioni sulla serie di font, leggere Serie di CSS.

Serie di font specifici

Utilizzo Attributo font-family Definire la serie di font del testo.

Utilizzo di una serie di font universali

Se desideri che il documento utilizzi un font sans-serif, ma non ti importa quale, ecco una dichiarazione adeguata:

body {font-family: sans-serif;}

Prova a fare tu stesso

L'agente utente selezionerà un font dalla serie di font sans-serif (ad esempio, Helvetica) e lo applicherà all'elemento body. Poiché c'è l'inheritance, questa scelta del font verrà applicata a tutti gli elementi contenuti nell'elemento body, a meno che non ci sia un selettore più specifico che lo copra.

Serie di font specifici

Oltre a utilizzare una serie di font universali, puoi anche impostare un font più specifico tramite l'attributo font-family.

Esempio seguente imposta il font Georgia per tutti gli elementi h1:

h1 {font-family: Georgia;}

Prova a fare tu stesso

Questa regola può causare un altro problema, se l'agente utente non ha installato il font Georgia, può solo utilizzare il font predefinito dell'agente utente per visualizzare l'elemento h1.

Possiamo risolvere questo problema combinando un nome di font specifico e una serie di font universali:

h1 {font-family: Georgia, serif;}

Prova a fare tu stesso

Se il lettore non ha installato Georgia, ma ha installato il font Times (un font della serie di font serif), l'agente utente potrebbe utilizzare Times per l'elemento h1. Anche se Times non corrisponde perfettamente a Georgia, è comunque sufficientemente vicino.

Di conseguenza, raccomandiamo di fornire una serie di font universali in tutte le regole font-family. Questo fornisce una via di uscita, in caso l'agente utente non possa fornire un font specifico che corrisponda alle regole, può scegliere un font candidato.

Se sei molto familiare con i caratteri, puoi anche specificare una serie di font simili per l'elemento fornito. Per fare questo, è necessario ordinare i font in base alla priorità e connetterli con una virgola:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

Prova a fare tu stesso

Secondo questa lista, l'agente utente cercherà questi tipi di carattere nell'ordine elencato. Se tutti i tipi di carattere elencati non sono disponibili, verrà semplicemente scelto un tipo di carattere serif disponibile.

Uso delle virgolette

Forse avete notato che negli esempi precedenti sono state utilizzate le virgolette singole. È necessario utilizzare virgolette solo quando il nome del tipo di carattere contiene uno o più spazi (ad esempio New York) o se il nome del tipo di carattere include simboli come # o $.

Le virgolette singole o doppie sono accettabili. Tuttavia, se si mette un attributo font-family all'interno dell'attributo style di HTML, è necessario utilizzare il tipo di virgolette non utilizzato dall'attributo stesso:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

Prova a fare tu stesso

Stile del carattere

Proprietà font-styleIl più utilizzato per definire il testo in corsivo.

Questa proprietà ha tre valori:

  • normal - Visualizzazione del testo normale
  • italic - Visualizzazione del testo in corsivo
  • oblique - Visualizzazione del testo inclinato

Esempio

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Prova a fare tu stesso

Differenza tra italic e oblique

font-style è molto semplice: utilizzato per scegliere tra testo normale, testo italic e testo oblique. L'unica cosa un po' complessa è chiarire la differenza tra testo italic e testo oblique.

L'italic è un semplice stile di carattere che modifica leggermente la struttura di ciascuna lettera per riflettere l'aspetto del cambiamento. A differenza di questo, il testo oblique è una versione inclinata del testo verticale normale.

Di solito, il testo italic e oblique si presentano esattamente uguali nei browser web.

Modifica del tipo di carattere

Proprietà font-variantÈ possibile impostare le lettere in piccolo maiuscolo.

Le lettere in piccolo maiuscolo non sono semplicemente lettere maiuscole né minuscole; queste lettere utilizzano maiuscole di diverse dimensioni.

Esempio

p {font-variant:small-caps;}

Prova a fare tu stesso

Grassetto del font

Proprietà font-weightImpostare la spessore del testo.

Utilizzare la parola chiave bold per impostare il testo in grassetto.

Le parole chiave 100 ~ 900 assegnano 9 gradi di grassetto al font. Se un font ha integrato questi gradi di grassetto, questi numeri si mappano direttamente ai livelli predefiniti, 100 corrisponde al font più sottile, 900 al più spesso. Il numero 400 è equivalente a normal, mentre 700 a bold.

Se si imposta il grassetto dell'elemento su bolder, il browser imposta un grassetto più spesso rispetto al valore ereditato. Al contrario, la parola leggera lighter fa sì che il browser riduca la spessore del grassetto anziché aumentarlo.

Esempio

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Prova a fare tu stesso

Dimensione del font

Proprietà font-sizeImpostare la dimensione del testo.

Essere in grado di gestire la dimensione del testo è importante nel campo del design web. Ma, non si dovrebbe modificare la dimensione del testo per far sembrare un paragrafo come un titolo, o un titolo come un paragrafo.

Utilizzare sempre i titoli HTML corretti, ad esempio utilizzare <h1> - <h6> per etichettare i titoli, utilizzare <p> per etichettare i paragrafi.

Il valore di font-size può essere assoluto o relativo.

Valore assoluto:

  • Impostare il testo a una dimensione specifica
  • Non permettere agli utenti di cambiare la dimensione del testo in tutti i browser (non è utile per l'accessibilità)
  • La dimensione assoluta è utile quando si determinano le dimensioni fisiche di output

Dimensione relativa:

  • Impostare la dimensione in relazione agli elementi circostanti
  • Permettere agli utenti di cambiare la dimensione del testo nel browser

Attenzione:Se non si specifica la dimensione del font, la dimensione predefinita del testo normale (ad esempio, un paragrafo) è di 16 pixel (16px = 1em).

Utilizzare i pixel per impostare la dimensione del font

Impostare la dimensione del testo in pixel permette di avere un controllo completo sulla dimensione del testo:

Esempio

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

Prova a fare tu stesso

In Firefox, Chrome e Safari è possibile riaggiustare la dimensione del testo degli esempi sopra indicati, ma non in Internet Explorer.

Anche se è possibile regolare la dimensione del testo utilizzando lo strumento di zoom del browser, questo effettivamente regola l'intera pagina, non solo il testo.

Utilizzare em per impostare la dimensione del font

Per evitare problemi di non essere in grado di regolare il testo in Internet Explorer, molti sviluppatori utilizzano unità em.

W3C raccomanda l'uso dell'unità di dimensione EM.

1em è uguale alla dimensione corrente del tipo di carattere. Se la dimensione del tipo di carattere di un elemento è di 16 pixel, allora per quell'elemento, 1em è uguale a 16 pixel. Quando si imposta la dimensione del tipo di carattere, il valore EM cambia rispetto alla dimensione del tipo di carattere dell'elemento genitore.

La dimensione predefinita del testo nei browser è di 16 pixel. Pertanto, la dimensione predefinita di 1em è di 16 pixel.

Puoi utilizzare la seguente formula per convertire i pixel in EM:pixels/16=em

(Nota: 16 è la dimensione predefinita del tipo di carattere dell'elemento genitore, supponiamo che la dimensione del tipo di carattere dell'elemento genitore sia 20px, allora la formula deve essere modificata:pixels/20=em

Esempio

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Prova a fare tu stesso

Nell'esempio sopra, la dimensione del testo in EM è la stessa della dimensione del testo in pixel nell'esempio precedente. Tuttavia, se si utilizza l'unità EM, è possibile regolare la dimensione del testo in tutti i browser.

Sfortunatamente, ci sono ancora problemi in IE. Quando si reimposta la dimensione del testo, sarà più grande o più piccolo rispetto alla dimensione normale.

Combina percentuale e EM

Un metodo efficace in tutti i browser è impostare il valore predefinito di font-size per l'elemento body (elemento genitore) in percentuale:

Esempio

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Prova a fare tu stesso

Il nostro codice è molto efficace. In tutti i browser, può visualizzare la stessa dimensione del testo e consentire di ingrandire o ridurre la dimensione del testo in tutti i browser.

Esempio di proprietà di tipo di carattere CSS:

Impostare il tipo di carattere del testo
Questo esempio dimostra come impostare il tipo di carattere del testo.
Impostare la dimensione del tipo di carattere
Questo esempio dimostra come impostare la dimensione del tipo di carattere.
Impostare lo stile del tipo di carattere
Questo esempio dimostra come impostare lo stile del tipo di carattere.
Impostare il tipo di carattere alternativo
Questo esempio dimostra come impostare il tipo di carattere alternativo.
Impostare lo spessore del tipo di carattere
Questo esempio dimostra come impostare la spessore del tipo di carattere.
Tutte le proprietà del tipo di carattere in una dichiarazione
Questo esempio dimostra come utilizzare le proprietà abbreviate per impostare le proprietà del tipo di carattere in una dichiarazione.

Proprietà di tipo di carattere CSS

Proprietà Descrizione
font Proprietà abbreviate. Funzione: impostare tutte le proprietà del tipo di carattere in una dichiarazione.
font-family Impostare la serie di caratteri.
font-size Impostare la dimensione del carattere.
font-size-adjust Eseguire una scalatura intelligente per i caratteri sostitutivi quando il carattere preferito non è disponibile. (L'attributo è stato rimosso da CSS2.1.)
font-stretch Estendere orizzontalmente il carattere. (L'attributo è stato rimosso da CSS2.1.)
font-style Impostare lo stile del carattere.
font-variant Visualizzare il testo in maiuscolo minuscola o in caratteri normali.
font-weight Impostare la spessore del carattere.