Propriété CSS font-family

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:

  1. family-name: C'est le nom de font-family tel que "times", "courier", "arial", etc.
  2. 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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 1.0+ 3.5+


Trouvez-vous cela utile?

Articles Associées