Les polices en CSS : choisir la famille de polices de caractères
Police en CSS : taille, gras, italique, oblique…

Gestion des différentes polices

êLa police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS.

1. font-family: Famille de police
2. font-size: Taille de votre police de caractère
3. font-style: Gras, italique, oblique…
4. font-variant: Variante de police
5. font-weight: Taille de la police

A savoir : Dans ce chapitre, la notion d’héritage est appliquée. (voir notion d’héritage sur ce lien Les noms de familles contenant des espaces doivent etre mis entre guillemets:

font-family: "Trebuchet MS", Verdana, Geneva, Arial;

Famille de police

Il est très utile de fixer avec le CSS la police de caractère : font-family: Verdana, sans-serif;
Deux valeurs possibles :

1. Nom de la famille
2. Famille générique

Si vous mettrez un nom de famille comme « verdana », c’est bien de mettre d’autre police de caractère dans l’ordre de votre préférence.

En effet, si la police que vous souhaitez pour votre site s’affiche correctement si votre ordinateur, elle peut ne pas être présente sur un autre ordinateur.
D’ou l’interet d’en mettre d’autres.

Taille de votre police de caratère

Vous pouvez aussi définir la taille de votre texte : font-size: valeur;
Valeurs possibles (en anglais):

1. xx-large
2. x-large
3. larger
4. large
5. medium
6. small
7. smaller
8. x-small
9. xx-small
10. length
11. % (pourcentage)

Gras, italique, oblique…

Vous pouvez définir de nombreuses choses grace au CSS: Gras, italique, oblique : font-style: valeur;
Valeurs possibles :

1. normal
2. italic (italique)
3. oblique

Voir un exemple :

Texte en italique.

Voir le code CSS :

Texte en italique.Texte oblique.

Variante de police

Cette option d’afficher en petites capitales, peut vous etre utile pour réaliser des titres ou sous-titres mais son utilité est vite limitée et sa répétition peut devenir pénible pour le visiteur. font-variant: valeur;
Valeurs possibles

1. normal
2. small-caps

Voir un exemple :

Voici un titre en petites majuscules

Voir le code CSS :

.small-caps { font-variant: small-caps ;}

Voir le code dans l’élément

Voici un titre en petites majuscules

Taille de la police

Vous pouvez controler la taille de votre texte : font-weight: valeur;
Valeurs possibles

1. lighter
2. normal
3. 100
4. 200
5. …
6. bold
7. bolder

Voir un exemple :

Voici un text font-weight: lighter

Voir le code CSS :

.font_weight_bolder { font-weight: lighter ;}

Voir le code dans l’élément

Voici un text font-weight: bolder

Apprendons la gestion des Ancres, Liens et Pseudo Classes en CSS >>>