Des piles de polices — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 4)

Des piles de polices

Couleurs, unités et typographie · niveau 1 (application)

Énoncé

Écrire trois piles de polices : pour le texte courant (police du système), pour les titres (Georgia ou une police à empattements), pour le code (police à chasse fixe). Que se passe-t-il si l'on écrit font-family: Georiga, serif ? Et font-family: "sans-serif" ?

Corrigé


/* Texte courant : la police de l'interface du système */
body {
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
}

/* Titres : une police à empattements répandue */
h1,
h2 {
  font-family: Georgia, "Times New Roman", serif;
}

/* Code : une police à chasse fixe */
code,
pre {
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

Georiga n'existe pas : le navigateur passe sans rien dire à la police suivante, serif (en général Times). La faute ne se voit que si l'on connaît Georgia ; l'onglet Computed montre, tout en bas, la police réellement utilisée (Rendered Fonts). "sans-serif" entre guillemets désigne une police nommée « sans-serif », qui n'existe pas : la pile est vide, et le navigateur utilise sa police par défaut, à empattements.