Propriété CSS font-family

La propriété font-family vous permet de spécifier une liste ordonnée par priorité de noms de familles de polices et/ou de noms de familles génériques pour l'élément sélectionné.

Nous utilisons des virgules pour séparer les valeurs et les afficher comme des alternatives. Le navigateur sélectionnera la première police à utiliser si elle est disponible. Cependant, elle peut être indisponible dans certains cas si l'ordinateur de l'utilisateur ne possède pas cette police. Lorsque cette situation se produit, le navigateur essaiera d'utiliser l'alternative suivante pour afficher le texte (ou même un caractère que la première police ne peut pas afficher).

Il existe deux types de noms de familles de polices :

family-name : Il s'agit du nom d'une police, comme "times", "courier", "arial", etc.
generic-family : Il s'agit du nom d'une famille générique, comme "serif", "sans-serif", "system-ui", "ui-sans-serif", "cursive", "fantasy", "monospace".

Lorsque le nom de la police contient des espaces, il doit être entouré de guillemets, comme suit : "Courier New".

TIP

Lorsque nous souhaitons utiliser une police unique, nous devons utiliser la règle @font-face.

Valeur initiale	serif
S'applique à	Tous les éléments. Elle s'applique également à ::first-letter et ::first-line.
Héritée	Oui.
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.fontFamily = "Verdana, sans-serif";

Une liste de polices est spécifiée, de la priorité la plus élevée à la police de secours la plus basse, par la propriété font-family. La sélection de police ne s'arrête pas à la première police de la liste ; elle se fait caractère par caractère. Cela signifie que si une police disponible ne possède pas de glyphe pour un caractère spécifique, le navigateur essaiera les polices suivantes dans la liste.

Syntaxe

Syntaxe de la propriété CSS font-family

css

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

Exemple de la propriété font-family :

Exemple de la propriété CSS font-family avec la valeur sans-serif

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Font-family property example</h2>
    <p>We used "Lucida Grande" font-family for this text.</p>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester
family-name, generic-family	Liste ordonnée par priorité de noms de familles de polices et/ou de noms de familles génériques.	Tester »
initial	Définit la valeur par défaut de la propriété.	Tester »
inherit	Hérite la propriété de son élément parent.	Tester »

Pratique

Que fait la propriété 'font-family' en CSS ?

Elle définit la police du texteElle change la couleur du texteElle spécifie l'alignement du textePermet d'utiliser une police de secours, au cas où la police spécifiée n'est pas disponiblePermet de spécifier plusieurs polices

Propriété CSS font-family ​

Syntaxe ​

Exemple de la propriété font-family : ​

Valeurs ​

Pratique ​

Propriété CSS font-family

Syntaxe

Exemple de la propriété font-family :

Valeurs

Pratique