Le proprietà dei font CSS definiscono la famiglia di font, l'audacia, la dimensione e lo stile di un testo.
Differenza tra font serif e sans serif,
Le famiglie di font CSS
In CSS, ci sono due tipi di nomi di famiglia dei font:
- generic famiglia - un gruppo di famiglie di font con un look simile (come "Serif" o "Monospace")
- carattere famiglia - una famiglia di font specifico (come "Times New Roman" o "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console |
All monospace characters have the same width |
 | Nota: su schermi di computer, i caratteri sans-serif sono considerati più facili da leggere rispetto font serif. |
|---|
Famiglia di font
La famiglia di font di un testo viene impostata con il font-family proprietà.
Il font-family proprietà dovrebbe contenere diversi nomi dei font come un sistema "di ripiego". Se il browser non supporta il primo carattere, si cerca il carattere successivo, e così via.
Inizia con il tipo di carattere che si desidera, e terminare con una famiglia generica, di lasciare che il browser scegliere un carattere simile nella famiglia generica, se nessun altro font sono disponibili.
Nota: Se il nome di una famiglia di font è più di una parola, deve essere tra virgolette, come: "Times New Roman".
Più di una famiglia di font è specificato in un elenco separato da virgole:
Per le combinazioni dei caratteri di uso comune, guardare il nostro Web sicure caratteri Combinazioni .
Stile carattere
Il font-style proprietà è in gran parte utilizzato per specificare il testo corsivo.
Questa proprietà ha tre valori:
- normale - Il testo viene visualizzato normalmente
- italico - Il testo viene mostrato in corsivo
- obliqua - Il testo è "appoggiato" (obliqua è molto simile al corsivo, ma meno supportato)
Esempio
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} Prova tu stesso " Dimensione del font
Il font-size proprietà imposta la dimensione del testo.
Essendo in grado di gestire le dimensioni del testo è importante nel web design. Tuttavia, non si dovrebbe usare regolazioni del formato dei caratteri per rendere paragrafi apparire come intestazioni, o alle voci sembrano paragrafi.
Usare sempre i tag HTML appropriati, come <h1> - <h6> per le intestazioni e <p> per i paragrafi.
Il valore font-size può essere una dimensione assoluta, o relativa.
dimensione assoluta:
- Imposta il testo a una dimensione specificata
- Non consente a un utente di modificare la dimensione del testo in tutti i browser (male per ragioni di accessibilità)
- dimensione assoluta è utile quando è nota la dimensione fisica del uscita
Dimensione relativa:
- Imposta la dimensione relativa agli elementi circostanti
- Consente all'utente di modificare la dimensione del testo nei browser
| Nota: se non si specifica una dimensione di carattere, la dimensione predefinita per il testo normale, come i paragrafi, è 16px (16px = 1em). |
|---|
Impostare Dimensione carattere Con Pixel
Impostare la dimensione del testo con i pixel ti dà il pieno controllo sulla dimensione del testo:
Suggerimento: se si utilizza pixel, è comunque possibile utilizzare lo strumento Zoom per ridimensionare l'intera pagina.
Impostare Dimensione carattere con Em
Per consentire agli utenti di ridimensionare il testo (nel menu del browser), molti sviluppatori em usare al posto di pixel.
L'unità di misura em è raccomandata dal W3C.
1em è uguale alla dimensione del font corrente. La dimensione del testo predefinito nel browser è 16px. Così, la dimensione predefinita di 1em è 16px.
La dimensione può essere calcolata da pixel a em che utilizzano questa formula:pixels/ 16 =em
Esempio
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} Prova tu stesso " Nell'esempio precedente, le dimensioni del testo em è la stessa dell'esempio precedente in pixel. Tuttavia, con la dimensione em, è possibile regolare le dimensioni del testo in tutti i browser.
Purtroppo, non vi è ancora un problema con le versioni precedenti di IE. Il testo diventa più grande di quanto dovrebbe quando fatta più grande, e più piccolo di quanto dovrebbe quando reso più piccolo.
Utilizzare una combinazione di cento e Em
La soluzione che funziona in tutti i browser, è quello di impostare un tipo di carattere, dimensione predefinita in percentuale per l'elemento <body>:
Esempio
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} Prova tu stesso " Il nostro codice ora funziona alla grande! Essa mostra la stessa dimensione del testo in tutti i browser, e permette a tutti i browser per ingrandire o ridimensionare il testo!
Font Peso
Il font-weight proprietà specifica il peso di un tipo di carattere:
Font Variante
Il font-variant proprietà specifica se un testo dovrebbe essere visualizzato in un font maiuscoletto.
In un font maiuscoletto, tutte le lettere minuscole vengono convertite in lettere maiuscole. Tuttavia, le lettere maiuscole appaia su una dimensione di carattere più piccola delle lettere maiuscole originali nel testo.
Altri esempi
Tutte le proprietà del carattere in una dichiarazione
Questo esempio dimostra come utilizzare la proprietà scorciatoia per settare tutte le proprietà dei font in una dichiarazione.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »
Tutte le proprietà CSS dei font
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |