L'écriture

ComplémentÉditeur d'écriture

font-size
font-family
color
font-style
font-weight

Bonjour
Font

DéfinitionLa taille

1
p { font-size: 18px;}
2
p { font-size: 1.5em;}
3
p { font-size: 50%;}

DéfinitionLa police

Pour afficher les polices, il faut que le système est en interne leur définition.

1
.p1 { font-family: arial;}
2
.p2 { font-family: "courier new";}
3
.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.

1
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

1
@font-face {
2
  font-family: "maPolice";
3
  src: url("maPolice.ttf");
4
}
5
p { font-family: "maPolice";}

Sites proposant des polices :

Font squirrel

Font Library

Police : waltograph[1]

1
@font-face {
2
  font-family: 'Waltograph';
3
  src: url("../res/waltograph.otf");
4
}
5
p {
6
  font-family: 'Waltograph';
7
  font-size: 2.5em;
8
}
9
1
<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.
 


Interprétation de CSS
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, 159,0 ko]
1
@font-face {
2
  font-family: 'maFont';
3
  src: url("../res/maFont.woff");
4
}
5
p { 
6
  font-family: 'maFont';
7
  font-size: 2.5em;
8
}
1
<p>azertyuijkl</p>
2
<p>mnopqrstuvw</p>
3
<p>9é"'(-è_çà)=</p>
4
<p>&#57447;&#57571;&#57547;&#57791;&#57506;</p>


 
azertyuijkl
 
mnopqrstuvw
 
9é"'(-è_çà)=
 

 


Interprétation de CSS
DéfinitionLe style
1
.p1 { font-style: normal;}
2
.p2 { font-style: italic;}
3
.p3 { font-style: oblique 30deg;}
DéfinitionL'épaisseur
font-weight : épaisseur de caractère (normal, bold, lighter, nombre entre 1 et 1000)
1
span { font-weight: 900;}
1
<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.
 


Interprétation de CSS