CSS : font-family, font-size, font-variant, font-weight

» Les polices en CSS

Gestion des différentes polices

Introduction

La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS.
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 être 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 :
  • Nom de la famille
  • 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 être présente sur un autre ordinateur.

D'ou l'intérèt 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):
  • xx-large
  • x-large
  • larger
  • large
  • medium
  • small
  • smaller
  • x-small
  • xx-small
  • length
  • % (pourcentage)

Gras, italique, oblique...
Vous pouvez définir de nombreuses choses grace au CSS: Gras, italique, oblique...
font-style: valeur;
Valeurs possibles :
  • normal
  • itailc (italique)
  • oblique

Voir un exemple
Texte en italique.

Voir le code CSS
Voir le code dans l'élément

Exemple :
Texte en italique.
Texte oblique.
Variante de police
Cette option d'afficher en petites capitales, peut vous être 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 Voir un exemple

Voici un titre en petites majuscules

Voir le code CSS
Voir le code dans l'élément

Taille de la police
Vous pouvez controler la taille de votre texte :
font-weight: valeur;
Valeurs possibles
  • lighter
  • normal
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • bold
  • bolder
Voir un exemple

Voici un text font-weight: lighter

Voir le code CSS
Voir le code dans l'élément

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

Débuter en CSS :

Comprendre et coder en CSS

Tutoriels

Liens