CSS offre numerosi attributi anche per l'adattamento del carattere, che vanno dalla famiglia del carattere allo stile del carattere fino alle ombre.
Tra gli attributi CSS del carattere si intendono informazioni sulla famiglia del carattere, lo stile del carattere e il peso del carattere. Questi attributi sono naturalmente utili principalmente per gli elementi HTML contenenti testo (p, i, ecc.). Possono anche essere utilizzati per le tabelle.
Attraverso font-family è possibile definire la famiglia del carattere da utilizzare.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>L'aspetto nel browser si presenta come segue:
Tipiche famiglie di caratteri sono ad esempio Arial, Helvetica e Times Roman. Alla proprietà CSS font-family si assegnano le famiglie di caratteri desiderate. Se si specificano più tipi di carattere, l'ordine è determinante. Se il primo tipo di carattere specificato è disponibile, verrà utilizzato. I tipi di carattere desiderati vanno separati da virgole. Come ultima istruzione si scrive di solito una così detta famiglia di caratteri generica. Con una tale famiglia si offre ai browser la possibilità di selezionare un tipo di carattere che sia almeno simile a quello specificato.
• serif = un tipo di carattere con grazie
• sans-serif = un tipo di carattere senza grazie
• cursive = un tipo di carattere per la scrittura corsiva
• fantasy = un tipo di carattere per la scrittura insolita
• monospace = un tipo di carattere con caratteri a spaziatura fissa.
Lo stile del carattere
Con la proprietà font-style è possibile definire lo stile del carattere. Se il tipo di carattere scelto lo permette, è possibile forzare uno stile corsivo specificando il valore italic.
Altri tipi di carattere possono essere inclinati specificando oblique.
L'attributo CSS successivo che influisce sull'aspetto del carattere si chiama font-variant. Con esso è possibile definire le maiuscole in versali.
A tale scopo si assegna il valore small-caps a font-variant.
La dimensione del carattere
È ovviamente molto importante specificare anche la dimensione del carattere. CSS mette a disposizione la proprietà font-size. Le dimensioni dei caratteri possono essere specificate con unità molto diverse.
• EM
• REM
• Pixel
• Percentuale
• Parole chiave
Come parole chiave sono disponibili le seguenti varianti:
• xx-small – molto piccolo
• x-small – piccolo
• small – ridotto
• smaller – più piccolo rispetto all'elemento genitore
• medium – medio
• large – grande
• x-large – molto grande
• xx-large – molto, molto grande
• larger – più grande rispetto all'elemento genitore
Ecco un esempio di come specificare la dimensione del carattere:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Ecco come appare tutto nel browser:
Si noti che la definizione delle dimensioni del carattere è molto complessa, poiché le diverse unità di misura hanno ciascuna i propri vantaggi e svantaggi.
Per avere una buona panoramica su quale unità di misura sia meglio utilizzare e quando, potete consultare la pagina http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Per tutti coloro che non vogliono leggersi il tutto: usate indicazioni relative come em per la visualizzazione su schermo. Per i layout di stampa, invece, si preferiscono le unità assolute come pt.
Il peso del carattere
Continuiamo con il cosiddetto peso del carattere. Con esso si determina lo spessore e la forza di un carattere. Per questo scopo si utilizza la proprietà font-weight.
.fett {
font-weight:bold;
}
Con questa sintassi il testo così contrassegnato verrà visualizzato in grassetto.
I valori possibili sono bold (grassetto), bolder (particolarmente grassetto), lighter (più leggero) e normal. Inoltre, sono ammessi i valori numerici 100, 200, 300, 400, 500, 600, 700, 800 e 900. Questi vanno da ultra-sottile (100) a particolarmente grassetto (900).
Riepilogo delle definizioni
In relazione alle definizioni dei caratteri, ha un ruolo importante anche la proprietà line-height, che definisce l'altezza delle righe. Torno più nel dettaglio su questa proprietà in seguito. A questo punto, va solo menzionata, poiché ha un certo ruolo in relazione alla proprietà font mostrata successivamente.
Potete combinare le informazioni presentate fino ad ora sulla rappresentazione dei caratteri. Per farlo, si utilizza la proprietà generale font, che include le seguenti informazioni singole o le include tutte.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Con font è possibile combinare diverse formattazioni dei caratteri. Potete specificare le proprietà precedentemente menzionate, ma non è obbligatorio utilizzarle tutte. Tuttavia, le proprietà per dimensione e famiglia del carattere sono obbligatorie.
Grazie alla forma abbreviata, è possibile mantenere più brevi e più chiari i file CSS.
L'ordine mostrato di seguito deve essere rispettato. Se le due proprietà font-size e line-height sono indicate, queste devono essere separate da una barra. Se viene fornito solo un valore, questo si riferisce a font-size.
Un esempio:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust è stata sviluppata per consentire di visualizzare font approssimativamente della stessa dimensione. Font diversi presentano diverse altezze di x anche con la stessa altezza del carattere. Tuttavia, i font con un'altezza maggiore di x sono più leggibili. Può quindi accadere che un documento diventi difficile da leggere se il font originale non è disponibile e viene sostituito con un altro di altezza di x più piccola. Con font-size-adjust si dovrebbe essere in grado di compensare questa differenza.
Un esempio:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
Nel prossimo tutorial, scoprirete ulteriori modi per personalizzare l'aspetto dei caratteri del vostro sito web.
