L'écriture
Complément : Éditeur d'écriture
Définition : La taille
p { font-size: 18px;}
p { font-size: 1.5em;}
p { font-size: 50%;}
Définition : La police
Pour afficher les polices, il faut que le système est en interne leur définition.
.p1 { font-family: arial;}
.p2 { font-family: "courier new";}
.p3 { font-family: "maPolice";}
Il se peut que le navigateur ne connaisse pas la police demandé, pour cela on en propose plusieurs, sinon la valeur par défaut est utilisée.
p { font-family: "maPolice", "courier new", arial;}
Il est possible de charger des polices en ligne. Pour cela on utilise la règle @font-face
@font-face {font-family: "maPolice";
src: url("maPolice.ttf");
}
p { font-family: "maPolice";}
@font-face {font-family: 'Waltograph';
src: url("../res/waltograph.otf");
}
p { font-family: 'Waltograph';
font-size: 2.5em;
}
<p>Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.</p>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
Police d’icônes vectorielles
Il existe différentes polices contenant des icônes :
Sur le site Fontastic on peut créer sa propre police à partir d'icône existant.
Police : maFont [ttf]
@font-face {font-family: 'maFont';
src: url("../res/maFont.woff");
}
p { font-family: 'maFont';
font-size: 2.5em;
}
<p>azertyuijkl</p>
<p>mnopqrstuvw</p>
<p>9é"'(-è_çà)=</p>
<p></p>
azertyuijkl
mnopqrstuvw
9é"'(-è_çà)=
Définition : Le style
.p1 { font-style: normal;}
.p2 { font-style: italic;}
.p3 { font-style: oblique 30deg;}
Définition : L'épaisseur
font-weight : épaisseur de caractère (normal, bold, lighter, nombre entre 1 et 1000)
span { font-weight: 900;}
<p>Généralement, on utilise un texte en <span>faux latin</span> (le texte ne veut rien dire, il a été modifié), le <span>Lorem ipsum</span> ou Lipsum, qui permet donc de faire office de texte d'attente.</p>
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente.