Polices en CSS
Vous savez déjà comment le texte s’assoit sur la ligne. Les polices choisissent quelles lettres vous voyez — la famille typographique, la taille, la graisse et si elles sont en italique. Le chargement de polices web personnalisées vient ensuite ; ici vous maîtrisez les propriétés de police de base.
Outils de police en un coup d’œil
📊 Propriétés de police courantes
| Propriété | Rôle au quotidien |
|---|---|
font-family |
Nomme la pile typographique (plus un repli générique) |
font-size |
Définit la taille du texte |
font-weight |
Définit la graisse (ex. 400, 700, bold) |
font-style |
Définit normal ou italic (et styles liés) |
font (raccourci) |
Combine style, graisse, taille et famille en une déclaration |
Piles font-family
Listez d’abord les polices préférées, puis des alternatives plus sûres, et terminez par une famille générique comme sans-serif ou serif pour toujours dessiner quelque chose.
Pile sans-serif lisible
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}Taille de police
font-size définit la taille du texte. Les unités relatives comme rem évoluent souvent plus calmement ; px et des mots-clés comme large fonctionnent aussi.
Tailles de titre et de corps
cssh1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}Graisse de police
font-weight contrôle le gras. Les graisses numériques (400, 700) ou les mots-clés (normal, bold) sont courants. La fonte doit supporter la graisse demandée.
Accentuer avec la graisse
css.lead {
font-weight: 700;
}
.caption {
font-weight: 400;
}Style de police — italic
font-style: italic incline le texte quand une italique est disponible. Utilisez-le pour les citations ou un accent doux, pas pour chaque paragraphe.
Citation en italique
cssblockquote {
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
}Raccourci font
Le raccourci font peut fixer style, graisse, taille et famille ensemble. La taille et la famille sont requises dans la forme attendue par la plupart des navigateurs.
Raccourci font sur un titre de carte
css.card-title {
font: italic 700 1.25rem Georgia, "Times New Roman", serif;
}Une habitude calme pour le corps
Choisissez une pile claire pour la page, une graisse ou taille un peu plus forte pour les titres, et gardez le corps facile à lire.
Baseline typographique de la page
cssbody {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}
h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
}À vous d’essayer
- Réglez
bodysur une pile sans-serif qui se termine parsans-serif. - Donnez à
h1unfont-sizeplus grand etfont-weight: 700. - Stylez un
blockquoteavecfont-style: italicet une pile serif. - Réécrivez un titre avec le raccourci
font. - Comparez le même paragraphe en serif vs sans-serif — remarquez le changement d’ambiance.
Erreurs fréquentes
- Nommer une police fancy sans repli (cassé si la fonte manque)
- Fixer d’énormes
pxpartout sans réflexion relative - Demander
font-weight: 900alors que la fonte ne livre que regular et bold - Sauter ici vers
@font-face/ polices web hébergées (leçon suivante) - Utiliser text-align ou text-decoration quand vous visiez font-family ou font-weight
Résumé
font-familyliste une pile et doit finir par une famille génériquefont-sizefixe la taille ; les unités relatives évoluent souvent calmementfont-weightetfont-styleajoutent gras et italique- Le raccourci
fontregroupe style, graisse, taille et famille - Gardez une pile de corps claire ; le chargement de polices web personnalisées vient ensuite
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut