Propriété CSS font-family

❮ Précédent Suivant ❯

La propriété font-family permet de créer une liste privilégiée de noms de famille de polices et/ou des noms de famille génériques pour l'élément sélécté.

On utilise des virgules pour séparer les valeurs et les montrer comme des alternatives. Le navigateur va sélécter la première police à utiliser si elle est disponible. De toute façon, elle peut être indisponible dans certains cas, par exemple si l'ordinateur de l'utilisateur n'a pas cette police. Quand cette situation occure, le navigateur essayera d'utiliser l'alternative prochaine pour afficher des textes (ou même un caractère que la première police ne peut pas montrer).

Il y a deux types de noms de famille de polices:

family-name: C'est le nom de font-family tel que "times", "courier", "arial", etc.
generic-family:C'est le nom de generic-family tel que "serif", "sans-serif", "cursive", "fantasy", "monospace".

Quand le nom de police comporte des blancs, il doit être encadré dans les quotes comme ça suit: "Courier New".

Quand on veut utiliser font-family unique, on doit utiliser la propriété @font-face.

Valeur initiale	Dépend du navigateur.
Appliquée à	Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée	Oui.
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.fontFamily = "Verdana,sans-serif";

Syntaxe

font-family: family-name | generic-family | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété font-family</h2>
    <p>Nous avons utilisée font-family "Lucida Grande" pour ce texte.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
family-name generic-family	Liste privilégiée de noms de famille de police et/ou noms de famille génériques.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.