Générateur de piles de polices CSS — Polices système et repli CJK

À quoi sert cet outil

Le générateur de piles de polices CSS construit une valeur font-family prête à coller à partir de polices déjà installées sur les appareils de vos visiteurs. Choisissez un style, comme la police d’interface native du système, une néo-grotesque comme Inter et Helvetica, une serif de transition comme Charter ou une police à chasse fixe adaptée au code, et l’outil liste la meilleure police de chaque plateforme dans le bon ordre.

Les piles reprennent la collection bien connue Modern Font Stacks, plus la pile classique -apple-system, BlinkMacSystemFont, "Segoe UI" que beaucoup de sites utilisent encore. Vous pouvez ajouter des polices de repli pour le chinois simplifié, le chinois traditionnel, le japonais, le coréen, l’arabe, le thaï ou le hindi, ainsi que des polices emoji en couleur à la fin.

Mode d’emploi

Choisissez une Pile de polices. L’aperçu à gauche montre son rendu sur l’appareil que vous utilisez en ce moment ; vous pouvez modifier son texte pour essayer vos propres mots.
Choisissez des Polices pour d’autres écritures si vos pages contiennent du texte chinois, japonais, coréen, arabe, thaï ou hindi.
Activez ou désactivez Ajouter les polices emoji.
Choisissez une Sortie : une déclaration font-family simple, une propriété personnalisée CSS, une entrée fontFamily pour Tailwind ou une simple liste.
Copiez le résultat ou téléchargez-le sous forme de fichier .css.

Les noms qui contiennent des espaces ou commencent par un chiffre sont mis entre guillemets automatiquement ; les mots-clés CSS comme system-ui et sans-serif ne le sont jamais, car les entourer de guillemets les transformerait en noms de polices inexistantes.

Exemple

Interface système avec repli pour le chinois simplifié :

font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Astuces

Utilisez une pile pour le texte courant et une pile à chasse fixe pour le code : deux piles système ne coûtent rien au chargement.
L’aperçu dépend des polices installées sur votre propre appareil : vérifiez aussi la page sous Windows et sur un téléphone.
Si vous ajoutez plus tard une police web, placez-la en tête de liste et gardez la pile système comme repli.

FAQ

› Qu'est-ce qu'une pile de polices ?

Une liste de familles de polices dans la propriété CSS font-family. Le navigateur utilise la première police installée sur l'appareil et passe à la suivante sinon, jusqu'à une famille générique comme sans-serif.

› Pourquoi ajouter des polices chinoises, japonaises ou coréennes ?

Les polices occidentales comme Inter ou Charter n'ont pas de glyphes CJK. Indiquer PingFang SC, Microsoft YaHei ou Noto Sans SC avant la famille générique permet au texte chinois d'utiliser une police assortie au style, plutôt que celle que le système choisit au hasard. Il en va de même pour l'arabe, le thaï et le hindi (devanagari). Le russe, l'ukrainien, le grec, le vietnamien, le turc, le polonais et les autres langues en alphabet latin ou cyrillique n'ont besoin de rien de plus : les polices système et Noto de chaque pile les couvrent déjà.

› Pourquoi les polices emoji sont-elles placées après sans-serif ?

Les polices emoji ne couvrent que les emojis. Les placer en dernier garantit que les lettres et chiffres ordinaires ne s'affichent jamais dans une police emoji, tout en gardant des emojis en couleur sur toutes les plateformes.

› Ces piles nécessitent-elles de télécharger des polices web ?

Non. Chaque pile utilise des polices livrées avec Windows, macOS, iOS, Android ou les distributions Linux courantes : les pages se chargent sans aucune requête de police.