HTML: Polices de Caractères - Tutoriel

Introduction

Le choix de la police de caractères dans vos pages HTML est un élément important du design. Ce tutoriel explore comment définir et appliquer différentes polices de texte dans vos pages web.

Exemples

Exemple 1 : Utilisation de `font-family` pour un Paragraphe

Utilisation de la propriété CSS `font-family` pour définir la police de caractères d'un paragraphe :

       <p style="font-family: 'Arial', sans-serif;">Ce texte utilise la police Arial.</p>

Exemple 2 : Polices Différentes pour un Titre

Définition de polices différentes pour un titre en utilisant `font-family` :

       <h2 style="font-family: 'Times New Roman', serif;">Titre avec Times New Roman</h2>

Exercices avec Corrections

Exercice 1 : Appliquer une Police à un Texte

Appliquez la police de caractères "Verdana" à un paragraphe :

       <p style="font-family: 'Verdana', sans-serif;">Ce texte utilise la police Verdana.</p>

Questions à Choix Multiple (QCM)

Quelle propriété CSS est utilisée pour définir la police de caractères d'un élément?
- A. font-style
- B. font-family
- C. text-font
Réponse correcte : B

Questions & Réponses

Question : Peut-on spécifier plusieurs polices de caractères dans la propriété `font-family`?

Réponse : Oui, vous pouvez spécifier plusieurs polices de caractères dans la propriété `font-family`, séparées par des virgules. Par exemple :

       <p style="font-family: 'Arial', 'Helvetica', sans-serif;">Texte avec plusieurs polices</p>

Études de Cas

Cas d'utilisation : Combinaison de Polices

Utilisez la propriété `font-family` pour combiner deux polices de caractères différentes dans un paragraphe :

       <p style="font-family: 'Georgia', 'Courier New', serif;">Texte avec une combinaison de polices</p>

Éléments à Retenir

La propriété CSS `font-family` est utilisée pour définir la police de caractères d'un élément HTML.
Vous pouvez spécifier plusieurs polices de caractères dans la propriété `font-family`.
Il est recommandé d'inclure une police de secours générique comme `sans-serif` en dernier.

Proposition d'un Examen avec Correction

Quelle propriété CSS est utilisée pour définir la police de caractères d'un élément?
- A. font-style
- B. font-family
- C. text-font
Correction : B

Polices de Caractères en CSS

La police de caractères est une propriété CSS qui permet de définir la police de caractères d'un élément HTML. Elle est définie à l'aide de la propriété font-family.

Valeur de la propriété font-family

La valeur de la propriété font-family est une chaîne de caractères qui contient la liste des polices de caractères que vous souhaitez utiliser. Les polices de caractères sont séparées par des virgules.

Exemples d'utilisation de la propriété font-family

Voici quelques exemples d'utilisation de la propriété font-family :

Pour définir la police de caractères du corps de la page web

body {
  font-family: sans-serif;
}

Ce code définit la police de caractères du corps de la page web en sans-serif.

Pour définir la police de caractères d'un paragraphe

p {
  font-family: Arial;
}

Ce code définit la police de caractères des paragraphes en Arial.

Pour définir la police de caractères d'un lien

a {
  font-family: Times New Roman;
}

Ce code définit la police de caractères des liens en Times New Roman.

Pour définir la police de caractères d'une image

img {
  font-family: Helvetica;
}

Ce code définit la police de caractères des images en Helvetica.

Remarques

La propriété font-family est facultative.
La propriété font-family doit être utilisée de manière cohérente.
La propriété font-family ne doit pas être utilisée pour créer un effet visuel trop important.

Exemples supplémentaires

Voici quelques exemples supplémentaires d'utilisation de la propriété font-family :

Pour définir une police de caractères personnalisée

body {
  font-family: "My Custom Font";
}

Ce code définit la police de caractères du corps de la page web en "My Custom Font", une police de caractères personnalisée.

Pour définir une police de caractères avec plusieurs variantes

body {
  font-family: sans-serif, serif;
}

Ce code définit la police de caractères du corps de la page web en sans-serif, et si la police de caractères sans-serif n'est pas disponible, la police de caractères serif sera utilisée.

Pour définir une police de caractères en fonction d'un contexte

p {
  font-family: sans-serif;
}

p:hover {
  font-family: serif;
}

Ce code définit la police de caractères des paragraphes en sans-serif par défaut, mais en serif lorsque l'utilisateur passe la souris dessus.

En comprenant comment utiliser la propriété font-family, vous pouvez créer des pages web plus attrayantes et plus faciles à lire.

Propriétés associées

La propriété font-family est souvent utilisée en association avec d'autres propriétés CSS pour contrôler l'apparence du texte. Par exemple, les propriétés font-size, font-weight, font-style et letter-spacing peuvent être utilisées pour définir la taille, le poids, le style et l'espacement des lettres du texte.

Conclusion

Les polices de caractères sont un élément important de la conception d'une page web. En choisissant les bonnes polices de caractères, vous pouvez créer des pages web plus attrayantes et plus faciles à lire.