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 caratè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 caratère : font-family: Verdana, sans-serif;
Deux valeurs possibles :
  1. Nom de la famille
  2. Famille généric
Si vous mettrez un nom de famille comme "verdana", c'est bien de mettre d'autre police de caratè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 etre présente sur un autre ordinateur.
D'ou l'intéret d'en mettre d'autres.

Taille de votre police de caratère

code CSS 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
<p class="small-caps">Voici un titre en petites majuscules</p>

Taille de la police

code CSS 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
<p class="font-weight">Voici un text font-weight: bolder</p> Apprendons la gestion des Ancres, Liens et Pseudo Classes en CSS >>>

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page http://www.cssdebutant.com/coder-en-css-police-taille-gras-oblique-italique.html Votes: 4.3 / 5 étoiles - 52 vote(s) et 10 commentaires