Polices de caractères

Famille de polices

• font-family sert à indiquer les polices à utiliser pour l'affichage d'un élément donné. Si plusieurs polices sont définies, la première trouvée sur le système de l'utilisateur sera utilisée.

  Code	Dans le navigateur
  <span style="font-family: Verdana">AaBbCcDd</span>	AaBbCcDd
  <span style="font-family: Symbol, Verdana, Courier, Times">AaBbCcDd</span>	AaBbCcDd
  <span style="font-family: Symbol, Courier, Times, 'new century schoolbook'">AaBbCcDd</span>	AaBbCcDd

  Si la police "Symbol" est disponible, la lettre D dans la deuxième rangée sera affichée comme Δ.

• Il existe deux types de noms de famille de polices :
  • les noms de famille : polices précises (Arial, Verdana, Courier, ...)
  • les familles génériques : des groupes de noms de familles ayant des aspects uniformes

    Famille générique	Description	Exemples	Dans le navigateur
    serif	Fontes à empattements ("serif"). Utilisée dans les livres.	Georgia	Création de sites Web
    		Times New Roman	Création de sites Web
    sans-serif	Fontes sans empattements. Un espacement des lettres proportionnel. Agréables à lire sur un écran.	Verdana	Création de sites Web
    		Arial	Création de sites Web
    		Helvetica	Création de sites Web
    		Trebuchet MS	Création de sites Web
    cursive	Les glyphes se touchent en partie ou complètement. Une impression d'écriture à la main.	Comic Sans MS	Création de sites Web
    monospace	Tous les glyphes ont les mêmes dimensions. Utilisés par <pre>	Courier New	Création de sites Web
    fantasy	Polices principalement décoratives	Impact	Création de sites Web

• Lorsqu'on spécifie des polices, on commence par la police préférée suivie par des polices de remplacement.

  Il est recommandé de terminer la liste de polices par une famille générique.

  Souvent, on spécifie trois polices : une présente sur PC (Times New Roman, Arial, Tahoma, Courier New), une sur Mac (Times, Helvetica, Arial, Courier) et une sous Linux, suivies d'un type de police.

Style de polices

font-style définit le style de la police utilisée. Il peut être "normal", "italic" ou "oblique".

"italic" et "oblique" sont très similaires mais "oblique" utilise toujours le glyphe (représentation graphique) de la police "roman".

Taille de polices

font-size définit la taille de la police utilisée.

• Taille absolue, indépendante de la table des tailles de police du navigateur, est définie en point (pt) ou en pixel (px);
  1pt = 1/72 de pouce
• Taille absolue, dépendante de la table des tailles de police du navigateur, est définie comme une des valeurs suivantes :
  xx-small, x-small, small, medium, large, x-large, xx-large.
• Taille relative est définie en pourcentage (%) ou en "em".
  Un em est une unité qui est proportionnelle à la taille de la police définie pour l'élément parent.
  0.8em = 80%, 0.9em = 90%
• Exemple :
  

  font-size	dans le navigateur
  8pt	8 points
  12pt	12 points
  16pt	16 points
  8px	8 pixels
  12px	12 pixels
  16px	16 pixels
  xx-small	xx-small
  x-small	x-small
  small	small
  medium	medium
  large	large
  x-large	x-large
  xx-large	xx-large
  Smaller	Smaller
  Normal	Normal
  Larger	Larger
  0.8em	0.8em
  1em	1em
  1.2em	1.2em
  55%	55%
  80%	80%
  100%	100%
  120%	120%

  
  Comparez l'affichage de ce tableau par IE et par Firefox.
• Pour rendre votre site Web accessible à tous, définissez l'ensemble de vos CSS avec des valeurs relatives telles que "%" ou "em".

La graisse de la police

La propriété font-weight spécifie la graisse de la police. Les valeurs possibles :

• 100 à 900 : valeur numérique
• normal (équivaut à 400)
• bold (équivaut à 700)
• bolder
• lighter

C'est rare qu'un navigateur supporte d'autres valeurs que "normal" et "bold".

Spécifier plusieurs propriétés d'un coup

La propriété font nous permet de définir toutes les différentes propriétés de police d'un coup.
Le code

span {
  font-family: tahoma, helvetica, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
}

est équivalent au code suivant :

span {
  font: tahoma, helvetica, sans-serif, normal, bold, 20px;
}