Famille de polices

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 18 sur 76.

En CSS, la propriété font-family est utilisée pour spécifier la police de caractères du texte au sein d'un élément HTML. Cette propriété vous permet de lister les polices préférées pour votre texte. Si la première police n'est pas disponible, le navigateur utilisera la suivante dans la liste, garantissant ainsi un aspect similaire.

Voici la syntaxe de base pour utiliser la propriété font-family :

selector {
    font-family: font1, font2, generic-family;
}

font1, font2 : Les noms de familles de polices préférés, listés par ordre de préférence. Si font1 n'est pas disponible, le navigateur essaiera font2, et ainsi de suite.

generic-family : Un nom de famille de polices générique, tel que serif, sans-serif, monospace, cursive ou fantasy. Cela sert de solution de repli si aucune des polices spécifiées n'est disponible.

Lors de la spécification des noms de familles de polices, il est important de suivre ces directives :

Si un nom de famille de polices contient des espaces, il doit être entouré de guillemets (par ex., "Times New Roman", "Courier New").

Les noms de familles de polices multiples doivent être séparés par des virgules.

C'est une bonne pratique d'inclure une famille de polices générique comme dernière option dans la liste pour s'assurer qu'une police de secours appropriée est utilisée si aucune des polices spécifiées n'est disponible.

Par exemple :

p {
    font-family: Arial, Helvetica, sans-serif;
}

Défi

Facile

On vous donne un document HTML avec un titre (<h1>) et un paragraphe (<p>). Votre tâche consiste à utiliser la propriété font-family pour styliser ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <h1>. Définissez la font-family sur "Times New Roman", Times, serif.
Écrivez une règle CSS qui cible l'élément <p>. Définissez la font-family sur Arial, Helvetica, sans-serif.

Aide-mémoire

La propriété font-family spécifie la police de caractères pour le texte. Listez les polices préférées par ordre de priorité - si la première n'est pas disponible, le navigateur utilise la suivante.

Syntaxe de base :

selector {
    font-family: font1, font2, generic-family;
}

Directives :

Les noms de polices contenant des espaces nécessitent des guillemets : "Times New Roman"
Séparez plusieurs polices par des virgules
Incluez une famille générique (serif, sans-serif, monospace, cursive, fantasy) comme solution de repli

Exemple :

p {
    font-family: Arial, Helvetica, sans-serif;
}

Essayez vous-même

<html>
<head>
    <title>Font Family</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>