Propriété CSS font-family
La propriété CSS font-family définit les noms de famille de polices pour l'élément sélectionné. Découvrez des exemples pratiques.
La propriété CSS font-family définit la police utilisée pour afficher le texte. Vous lui fournissez une liste de polices par ordre de priorité, et le navigateur parcourt cette liste de gauche à droite en utilisant la première qu'il trouve sur l'appareil de l'utilisateur.
Cette page explique le fonctionnement de la pile de polices, la différence entre les familles spécifiques et génériques, comment construire une liste de repli fiable, ainsi que les pièges liés aux guillemets et à la correspondance caractère par caractère.
Fonctionnement de la pile de polices
Les valeurs sont séparées par des virgules, et le navigateur les traite comme des alternatives — non pas comme une police combinée. Il utilise la première police disponible dans la liste, puis s'arrête :
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;Ici, le navigateur essaie d'abord "Segoe UI". Si elle n'est pas installée, il essaie Roboto, puis Helvetica, puis Arial, et enfin le générique sans-serif, que le navigateur satisfait toujours avec l'une de ses polices intégrées. C'est pourquoi une pile de polices doit toujours se terminer par une famille générique — cela garantit que le texte s'affiche de manière sensée même sur un appareil ne disposant d'aucune de vos polices préférées.
Les deux types de nom de police
Il existe deux types de valeurs que vous pouvez lister, et une bonne pile combine les deux :
family-name— le nom d'une police spécifique, comme"Times New Roman",CourierouArial. Listez-les en premier car ce sont les polices que vous souhaitez réellement utiliser.generic-family— un mot-clé de catégorie que le navigateur associe à une police intégrée appropriée. Indiquez-en un en dernier comme solution de repli ultime. Les familles génériques standard sont :
| Famille générique | Apparence typique | Exemples de polices |
|---|---|---|
serif | Lettres avec petits empattements | Times New Roman, Georgia |
sans-serif | Propre, sans empattements — courant pour l'interface/le texte courant | Arial, Helvetica |
monospace | Chaque caractère a la même largeur — pour le code | Courier New, Consolas |
cursive | Style écriture manuscrite / script | Brush Script, Comic Sans |
fantasy | Style décoratif | Impact, Papyrus |
system-ui | La police d'interface native de l'appareil | San Francisco, Segoe UI |
Guillemets autour des noms de polices
Quand un nom de police contient des espaces (ou pourrait être confondu avec un mot-clé), entourez-le de guillemets :
/* Multi-word names need quotes */
font-family: "Courier New", "Lucida Console", monospace;
/* Single-word names don't, but quotes are still valid */
font-family: Georgia, serif;Ne mettez jamais de guillemets autour du mot-clé de famille générique — "sans-serif" serait interprété comme une police littéralement nommée "sans-serif" plutôt que comme la catégorie générique.
Correspondance caractère par caractère
La sélection de police ne s'arrête pas à la première police disponible pour l'ensemble du texte — elle s'effectue caractère par caractère. Si la police sélectionnée n'a pas de glyphe pour un caractère particulier (par exemple un emoji ou une lettre non latine), le navigateur continue de parcourir la liste pour trouver une police qui possède ce glyphe. C'est pourquoi conserver une famille générique large en fin de liste est utile pour les contenus multilingues ou riches en symboles.
Pour charger et utiliser une police personnalisée qui n'est pas installée sur l'appareil de l'utilisateur, définissez-la avec la règle @font-face puis référencez son nom dans font-family.
| Valeur initiale | serif |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Hérité | Oui. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.fontFamily = "Verdana, sans-serif"; |
Syntaxe
Syntaxe de la propriété CSS font-family
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
<!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>La pile ci-dessus demande "Lucida Sans Unicode", utilise "Lucida Grande" comme repli (l'équivalent macOS), et enfin ce que le navigateur utilise pour sans-serif — ainsi le paragraphe reste lisible partout.
Construire une pile de polices robuste
Une pile pratique liste, dans l'ordre : votre police idéale, une ou deux alternatives largement installées avec un aspect similaire, et une famille générique pour terminer. Une pile de « polices système » courante qui utilise la police d'interface native de chaque plateforme ressemble à ceci :
body {
font-family: -apple-system, system-ui, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}Cela s'affiche en San Francisco sur les appareils Apple, en Segoe UI sur Windows et en Roboto sur Android — sans téléchargement de police web.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| family-name, generic-family | Liste prioritaire de noms de familles de polices et/ou de noms de familles génériques. | Essayer » |
| initial | Force la propriété à utiliser sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. | Essayer » |
Propriétés associées
font-family est généralement défini avec les autres propriétés de police, ou en une seule fois avec la propriété raccourcie font :
- font-size — la taille du texte.
- font-weight — la graisse du texte.
- font-style — italique ou normal.
- @font-face — charger une police web personnalisée à référencer ici.