In questa pagina vengono forniti altri esempi sullo stile del testo.
Modificherai il foglio di stile d'esempio applicando font diversi.
Informazioni: Stili del testo
Nel CSS sono contenute numerose proprietà che agiscono sullo stile del testo.
C'è una proprietà sintetica molto conveniente, font, che può essere utilizzata per specificare diverse caratteristiche in una sola volta—per esempio:
- Testo in grassetto (Bold), corsivo (italic), o maiuscolo (small-caps)
- La dimensione
- L'altezza della linea
- L'aspetto del font
p {font: italic 75%/125% "Comic Sans MS", cursive;}
Questa regola imposta numerose proprietà del font, rendendo tutti i paragrafi corsivi (italic). La dimensione del font è impostata a tre-quarti della dimensione specificata nell'elemento genitore di ogni paragrafo, e l'altezza della linea è pari al 125% (lievemente maggiore del normale). L'aspetto del font è Comic Sans MS, ma se tale font non sarà disponibile, il browser applicherà il proprio stile corsivo predefinito. La regola ha anche l'effetto indiretto di disattivare il grassetto e il maiuscolo (impostandoli su |
Famiglie di font
Non è possibile prevedere quali siano i font disponibili di colui che legge il proprio documento. Per questo motivo, quando si specifica un font, è una buona idea fornire anche un elenco di font alternativi, in ordine di preferenza.
E' inoltre consigliabile di chiudere questo elenco con uno dei font predefiniti: serif, sans-serif, cursive, fantasy o monospace.
Se uno specifico font non supporta alcuni elementi del documento, ad esempio un carattere speciale, il browser può sostituirlo con uno che lo supporti.
Per specificare un font, utilizzare la proprietà font-family.
Dimensione dei font
Coloro che utilizzano i browsers Mozilla possono personalizzare le misure di default dei font tramite le Opzioni, e cambiare la dimensione dei testi mentre stanno leggendo una pagina web. E' perciò buona regola, se possibile, utilizzare dimensioni relative.
Puoi utilizzare valori quali small, medium e large, oppure puoi usare valori relativi alla dimensione dell'elemento "padre", del tipo: smaller, larger, 150% o 1.5.
Se necessario puoi anche adottare una misura specifica, ad esempio: 12px (12 pixels) per i dispositivi video o 12pt (12 punti) per i dispositivi di stampa.
Il dimensionamento in em è invece un'unità relativa. Per definizione, 1em corrisponde all'altezza media di un carattere di un dato font (in genere il riferimento è la lettera m). In pratica, l'em varia anche in relazione alla dimensione del font dichiarata per l'elemento "padre".
Per specificare la dimensione del font, dovrai usare la proprietà font-size.
Interlinea
L'interlinea specifica lo spazio tra le linee di testo. Se il tuo documento presenta lunghi paragrafi con molte linee di testo, un'interlinea più ampia agevola la lettura, specialmente se il font è piccolo.
Per specificare l'interlinea, la proprietà da utilizzare è line-height.
Decoration
The separate text-decoration property can specify other styles, like underline or line-through.
You can set it to normal to explicitly remove any decoration.
Other properties
To specify italic on its own, use font-style: italic;
To specify bold on its own, use font-weight: bold;
To specify small capitals on its own, use font-variant: small-caps;
To turn any of these off individually, you can specify the value normal or
inherit.
| You can specify text styles in a variety of other ways.
For example, some of the properties mentioned here have other values that you can use. In a complex stylesheet, avoid using the shorthand For full details of the properties that relate to fonts, see Fonts in the CSS Specification. For full details of text decoration, see Text there. |
Action: Specifying fonts
For a simple document, you can set the font of the BODY element and the rest of the document inherits the settings.
Edit your CSS file. Add this rule to change the font throughout. The top of the CSS file is a logical place for it, but it has the same effect wherever you put it:
body {font: 16px "Comic Sans MS", cursive;}
Add a comment explaining the rule, and add white space to make it match your preferred layout.
Refresh your browser to see the effect. If your system has Comic Sans MS, or another cursive font that does not support italic, then your browser chooses a different font face for the italic text in the first line:
| Cascading Style Sheets |
| Cascading Style Sheets |
From your browser's menu bar, choose View – Text Size – Increase.
Even though you specified 16 pixels in the style, a user reading the document can change the size.
Without changing anything else, make all six initial letters twice the size in the browser's default serif font:
|
What next?
Your sample document already uses several named colors. The next page lists the names of standard colors and explains how you can specify others: Color