css:font

Un article de Polydoc.

[modifier] Synopsis

Font permet de mettre en forme vos textes.

[modifier] Description

Font est une propriété globale pour gérer la mise en forme de vos textes en CSS. Elle en englobe plusieurs propriétés en une seule :

• font-family

• font-size

• font-weight

• font-style

• font-variant

[modifier] Utilisation

font: value;

[modifier] Arguments

Liste des arguments et ce qu'ils font :

Arguments pour font-family, défini la police à employer: Tous nom de police existante peu être un argument.

Note : Lorsque la police a un "espace" dans son nom, comme Arial Black, elle doit être mise entre " " ou ' ', ce qui donne : "Arial Black" ou 'Arial Black'.

Arguments pour font-size, défini la taille du texte: Vous avez le choix entre plusieurs unités:

• Unités fixes :
  • px => pixel
  • cm => centimètres
  • mm => millimètres
  • in => pouce
  • pt => 1 point = 1/72 pouce
  • pc => 1 pica = 12 pouces
• Unités relatives :
  • % => 100% correspond à la taille normale
  • em => 1.0 correspond à la taille normale
  • ex => 1.0 correspond à la taille normale
  • Par mot-clés :
    • xx-small => très très petit
    • x-small => très petit
    • small => petit
    • medium => moyen
    • large => grand
    • x-large => très grand
    • xx-large => très très grand

Note : Il est conseillé d'utiliser les unités de taille relative ( em et %) pour que votre site reste lisible quelque soit la résolution d'écran de l'utilisateur. En effet l'unité px est certe précise, mais un texte écrit en 6px (par exemple) sera lisible pour une résolution 1024x768 alors quelle apparaitra en tout petit (et donc illisible) sur des résolution telles que 1280x1024).

Arguments pour font-weight, défini si le texte est en gras :

• light => fin
• normal => par défaut
• bold => gras
• bolder => encore plus gras

Note : Il est conseillé d'utiliser cette propriété plutôt que d'utiliser la balise (X)HTML b lorsque vous désirez mettre un texte en gras.

Arguments pour font-style, défini si le texte est en italique :

• italic => italique
• oblique => italique aussi
• normal => par défaut

Note : Il est conseillé d'utiliser cette propriété plutôt que d'utiliser la balise (X)HTML i lorsque vous désirez mettre un texte en italique.

Arguments pour font-variant, défini si le texte est en petite capitale :

• small-caps => (italique)
• normal => (par défaut)

L'ordre n'a pas d'importance, mais il est préférable d'utiliser un ordre défini pour mieux s'y retrouver.

[modifier] Exemples

.titre
{
font: "Comic sans ms", 2.0em, bolder;
/* Tous le texte écrit dans des balises de classe "titre" sera en "comic sans ms" de taille 2.0 em et en très gras */
}
 
.sous_titre
{
font: "Arial Black", 130%, italic;
/* Tous le texte écrit dans des balises de classe "titre" sera en "Arial Black" de taille 130% et en italique*/
}

[modifier] Voir aussi

[modifier] Liens internes

• color
• font-size