CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 4 · Exercice de TD
Un faux gras
Couleurs, unités et typographie · niveau 2
Énoncé
@font-face {
font-family: "Gentium Plus";
src: url("../polices/GentiumPlus-Regular.woff2") format("woff2");
}
body {
font-family: "Gentium Plus", serif;
font-size: 1.5rem;
}La page contient Un <strong>vrai</strong> gras ou un <strong>faux</strong> ?. Le dossier polices/ contient GentiumPlus-Regular.woff2 et GentiumPlus-Bold.woff2. Les mots en <strong> paraissent gras, mais d'un gras épais et flou. Expliquer ce qui se passe et corriger. Ajouter le réglage qui garde le texte visible pendant le chargement.
Corrigé
La règle @font-face déclare le fichier romain sans graisse, c'est-à-dire pour la graisse normal seule, et aucun fichier n'est déclaré pour 700. Pour <strong> (font-weight: bold), le navigateur ne trouve que le romain et synthétise un gras en l'épaississant (dans Chromium, une seule police chargée, de graisse normal).
On déclare une règle par fichier :
@font-face {
font-family: "Gentium Plus";
src: url("../polices/GentiumPlus-Regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Gentium Plus";
src: url("../polices/GentiumPlus-Bold.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}
body {
font-family: "Gentium Plus", serif;
font-size: 1.5rem;
}Les deux fichiers sont alors chargés (graisses 400 et 700) et le gras est celui dessiné par l'auteur de la police :
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.