Familles de polices et polices sûres pour le web
Définissez les familles de polices et comprenez quelles polices peuvent être utilisées sans risque dans tous les navigateurs.
Familles de polices et polices sûres pour le web est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Propriété font-family
La propriété font-family définit la police de caractères d’un élément. Vous fournissez une pile de polices : une liste de noms de polices séparés par des virgules, de la plus préférée à la moins préférée, qui se termine par une famille générique.
<p>This text renders in the page's body font stack.</p>
Familles de polices génériques
CSS définit cinq familles génériques comme solutions de repli :
serif— polices avec empattements décoratifs (Times, Georgia)sans-serif— polices épurées sans empattements (Arial, Helvetica)monospace— polices à largeur fixe (Courier, Consolas)cursive— polices de style manuscritfantasy— polices décoratives d’affichage
Polices compatibles avec le Web
Les polices compatibles avec le Web sont préinstallées sur presque tous les systèmes d’exploitation. Vous pouvez les utiliser sans charger de fichier de police externe :
- Sans empattement : Arial, Helvetica, Verdana, Trebuchet MS
- Avec empattements : Georgia, Times New Roman
- À largeur fixe : Courier New, Consolas
Noms de polices avec espaces
Les noms de polices contenant des espaces doivent être placés entre guillemets :
<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>
Bonnes pratiques pour les piles de polices
Construisez votre pile de polices avec :
- Votre police préférée, qui n’est peut-être pas installée
- Une ou deux polices de repli similaires
- Une famille générique en dernier recours
<p class="font-stack">Georgia → Palatino Linotype → serif fallback</p>
Polices d’interface du système
Les conceptions modernes utilisent souvent des polices système : la police d’interface native du système d’exploitation. Le rendu paraît natif et ne nécessite aucun téléchargement :
<p class="system-ui-text">This uses your OS's native UI font.</p>
Piles à largeur fixe pour le code
Les éditeurs de code et les terminaux ont besoin d’une pile de polices à largeur fixe :
<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
return "world";
}</pre>
Hériter de font-family
La plupart des éléments héritent de font-family depuis leur parent. Certains éléments de formulaire (<input>, <textarea>) n’héritent pas de cette propriété par défaut dans certains navigateurs ; définissez-la explicitement :
<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>
Vérifier les polices disponibles
Vous pouvez vérifier si une police système est disponible avec la fonction local() dans @font-face. Les navigateurs essaient d’abord la police locale avant de la télécharger.
<p class="my-font-text">Text using MyFont (local match or fallback)</p>
Sous-ensemble avec Unicode-Range
Lors du chargement des polices, utilisez unicode-range dans @font-face pour ne charger que les plages de caractères nécessaires, ce qui réduit la taille des téléchargements des sites multilingues.
<p class="inter-text">Basic Latin text (U+0000–00FF range)</p>
Présentation des polices variables
Les polices variables contiennent une famille entière, avec ses graisses, largeurs et styles, dans un seul fichier grâce aux axes de variation de police. Elles réduisent considérablement le nombre de requêtes HTTP pour les conceptions riches en contenu typographique.
Vérification rapide
Quelle famille de polices générique devez-vous utiliser comme solution de repli finale pour une pile de polices sans empattement ?
Récapitulatif
La propriété font-family accepte une pile de polices qui se termine par une famille générique. Les polices compatibles avec le Web fonctionnent partout sans chargement. Les piles de polices d’interface système donnent un aspect natif sans coût lié aux requêtes HTTP. Mettez toujours entre guillemets les noms de polices contenant des espaces.
Questions Fréquemment Posées
La leçon « Familles de polices et polices sûres pour le web » est-elle gratuite ?
Oui — le texte complet de « Familles de polices et polices sûres pour le web » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Familles de polices et polices sûres pour le web » ?
Définissez les familles de polices et comprenez quelles polices peuvent être utilisées sans risque dans tous les navigateurs. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Familles de polices et polices sûres pour le web » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Familles de polices et polices sûres pour le web
- Taille, épaisseur et style des polices
- Alignement, décoration et espacement du texte
- Google Fonts et @font-face