La propriété typographique : font (et ses dérivés)

font-family

Cette propriété permet de modifier la police du texte d'un élément. Elle prend pour valeur un ou plusieurs nom de police générique, séparés par des virgules, dont l'affichage se fait par ordre décroissant en fonction de leur disponibilité.

div.block
{
font-family: helvetica, "Trebuchet MS", arial;
}
Des mots, encore des mots, toujours des mots...

Pour les polices dont le nom est composé, il faut les entourer de guillemets.
font-size

Cette propriété permet de définir la taille de la police de fond. Elle prend pour valeur une unité de taille (voir la liste des unités de taille).

div.block
{
font-size: 10px;
}
Des mots, encore des mots, toujours des mots...
font-style

Cette propriété permet de gérer la répétition horizontale et verticale d'une image de fond. Vous trouverez la liste des valeurs possibles dans la liste suivante :

ValeurDescription
italicpenché
obliquesimilaire à la valeur italic
normalnon-penché

div.block
{
font-style: oblique;
}
Des mots, encore des mots, toujours des mots...

font-variant

Cette propriété permet transformer le texte d'un élément en petites capitales ou non :

ValeurDescription
small-capspetites capitales
normalforme par défaut

div.block
{
font-variant: small-caps;
}
Des mots, encore des mots, toujours des mots...

font-weight

Cette propriété permet de mettre le texte d'un élément en gras. Vous trouverez la liste des valeurs possibles dans la liste suivante :

ValeurDescription
boldgras
boldertrès gras
normalpas de gras

div.block
{
font-weight: bold;
}
Des mots, encore des mots, toujours des mots...

font

Cette propriété permet de définir en une seule ligne les propriétés font, en alignant les valeurs des propriétés dont on a besoin l'une derrière l'autre dans l'odre suivant :

font : font-style font-variant font-weight font-size font-family;


div.block
{
font: normal small-caps bolder 1.3em arial;
}
=
div.block
{
font-style: normal;
font-variant: small-caps;
font-weight: bolder;
font-size: 1.3em;
font-family: arial;
}
Des mots, encore des mots, toujours des mots...