Cours de (X)HTML / CSS

CSS - Typographie


font-family

Indique la police de caractères (les plus courantes sont : verdana, arial, helvetica,'Times New Roman').
On peut indiquer plusieurs valeurs par ordre décroissant de choix.
Les polices avec espaces doivent être mises entre guillemets.

Exemple :

font-family:'Times New Roman', Times, serif;
		

Rendu à l'affichage :

Du texte avec du style


font-size

Indique la taille de la police.

Valeurs possibles :

Les unités recommandés sont em, ex et %, car elles permettent le grossissement et se basent sur la taille du texte par défaut indiquée par l'utilisateur dans les préférences de son navigateur.

Exemple :

font-size:2em;
		

Rendu à l'affichage :

Du texte avec du style


color

Indique la couleur de la police.

Valeurs possibles :

Exemple :

color:#CC0033;
		

Rendu à l'affichage :

Du texte avec du style


font-style

Indique l'orientation de la police.

Valeurs possibles :

Exemple :

font-style:italic;
		

Rendu à l'affichage :

Du texte avec du style


font-weight

Indique la graisse de la police, c'est-à-dire l'épaissseur des traits de la police.

Valeurs possibles (bien reconnues par les navigateurs) :

Exemple :

font-weight:bold;
		

Rendu à l'affichage :

Du texte avec du style


font-variant

Permet l'affichage en petites capitales.

Valeurs possibles :

Exemple :

font-variant:small-caps;
		

Rendu à l'affichage :

Du texte avec du style


text-decoration

Indique le soulignement, le surlignement ou le texte barré.

Valeurs possibles :

Exemple :

text-decoration:underline;
		

Rendu à l'affichage :

Du texte avec du style


line-height

Indique l'interlignage.

Valeurs possibles :

Exemple :

line-height:0.9em;
		

Rendu à l'affichage :

Du texte avec du style
Du texte avec du style


text-align

Indique l'alignement du texte.

Valeurs possibles :

Exemple :

text-align:center;
		

Rendu à l'affichage :

Du texte avec du style


Syntaxe raccourcie

Il est possible de déterminer plusieurs propriétés de style par la propriété font.

Ordre pour la syntaxe raccourcie :

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size/line-height
  5. font-family

Il n'est pas nécessaire d'indiquer toutes les propriétés possibles dans la syntaxe raccourcie.

Exemple :

font: bold 1.5em times;
		

Rendu à l'affichage :

Du texte avec du style


Autres propriétés

Il existe d'autres propriétés d'affichage du texte.

En voici quelques-unes :