Elysia Tools
Navigation mobile
Workflow Playbook
Vérifiez les caractères couverts, comparez titres et paragraphes réels, réglez les axes variables et livrez un CSS adaptatif avec des polices de repli testées.
Dossiers
Ce parcours aide à livrer la typographie d’une page multilingue. Réunissez un titre long, un paragraphe, des montants, des noms accentués et les signes propres à chaque langue. Pour vos fichiers, font-file-inspector permet de conserver métadonnées et couverture avec la version et les graisses nécessaires. La couverture d’un bloc Unicode ne prouve pas que chaque caractère ou séquence sera correctement dessiné. Notez la source autorisée et examinez séparément les conditions de déploiement. Pour des codes inattendus ou invisibles, consultez unicode-emoji-debugging.
webfont-pairing-lab charge les familles Google Fonts de son catalogue et produit l’import des graisses choisies. Pour une police propre, utilisez font-pairing-preview-card après son chargement dans le site hôte. La carte ne télécharge rien à partir d’un nom. Une belle prévisualisation peut donc montrer un repli local ; contrôlez la police réellement rendue sur la page cible. Gardez le même texte en ajustant tailles et interlignes, et utilisez un titre long pour révéler les retours à la ligne trop serrés.
Si le fichier contient des axes fvar, variable-font-axis-instance-and-css-font-variation-settings-builder affiche instances et coordonnées possibles. Retenez les propriétés CSS de haut niveau adaptées et remplacez les références de prévisualisation par l’URL réelle du fichier. Avec une police statique, indiquez le fichier qui fournit chaque graisse. Un gras synthétique ne prouve pas le chargement du fichier prévu. Conservez ensemble version, liste de familles et coordonnées pour rendre la livraison reproductible.
Calculez avec css-fluid-typography-clamp-calc les bornes de taille entre les largeurs convenues. Appliquez le résultat et testez les deux extrêmes ainsi qu’une largeur intermédiaire. Augmentez le zoom et bloquez le chargement des polices pour observer retours à la ligne, libellés et texte coupé. Livrez CSS, sources, exemples linguistiques, largeurs testées et défauts restants. Les conflits de règles relèvent de css-authoring-layout-and-cascade-workflows ; poursuivez la vérification générale dans web-accessibility-audits.
Guide de workflow
Examinez styles, axes et couverture Unicode du fichier, puis comparez-les au texte réel et listez les caractères de repli.
Utilisez le laboratoire pour les familles hébergées ou la carte pour une liste CSS déjà chargée ; comparez les mêmes textes et interlignes.
Examinez instances et limites, prévisualisez les coordonnées puis exportez le CSS. Pour une police statique, gardez les fichiers de graisse.
Calculez clamp aux largeurs convenues, appliquez le CSS et vérifiez manuellement police rendue, retours à la ligne, zoom et repli.
Le laboratoire utilise son catalogue Google Fonts ; l’inspecteur analyse les fichiers. Un nom saisi dans la carte ne charge aucun fichier.
Utilisez le constructeur uniquement avec des axes fvar présents ; une police statique exige les fichiers de graisse correspondants.
Contrôlez couverture et glyphe de repli, puis examinez les codes suspects avec unicode-emoji-debugging avant de changer de police.