# Constructeur d’axes et d’instances de polices variables et de CSS font-variation-settings Téléversez une police variable (TTF/OTF/WOFF/WOFF2) pour inspecter ses axes fvar et instances nommées, prévisualiser l’interpolation en direct dans le navigateur et générer un CSS font-variation-settings prêt à coller, les propriétés de haut niveau équivalentes et un bloc @font-face variable. > Page canonique: https://elysiatools.com/fr/tools/variable-font-axis-instance-and-css-font-variation-settings-builder - **Catégorie:** Design - **Mots-clés:** police variable, axes fvar, instances nommées, css font-variation-settings, aperçu de police variable, inspection woff2 ## Présentation Lit la table fvar OpenType (axes min/défaut/max et instances nommées) via opentype.js, la WOFF2 étant décompressée par le port WebAssembly wawoff2. La génération du CSS suit CSS Fonts Level 4 §8.2 : les tags d’axes sont sensibles à la casse, les répétitions conservent la dernière valeur et la liste produite est dédupliquée puis triée par ordre croissant d’unités de code, comme la valeur calculée de la spécification. Lorsque des propriétés de haut niveau existent (wght→font-weight, wdth→font-width, slnt/ital→font-style avec angle nié, opsz→font-optical-sizing), elles sont proposées comme alternative recommandée. L’aperçu incorpore la police en @font-face data-URI, rend les extrêmes de chaque axe, toutes les instances nommées, vos coordonnées personnalisées et un playground de curseurs qui affiche le CSS en direct. ## Entrées - **Fichier de police** (file): Upload a variable font (.ttf / .otf / .woff / .woff2) - **Valeurs d’axes** (textarea): e.g. wght=625, wdth=110 — leave empty to inspect the font defaults - **Texte d’aperçu** (text): Defaults to "Handgloves 0123 — AaBbGgQqRr ÄÖÜ äöü ß ½ ¼ ←→" ## Quand l'utiliser - Pour identifier les axes disponibles (standards et personnalisés) ainsi que les plages min, défaut et max d'un fichier de police. - Pour tester visuellement des variations d'épaisseur, de chasse ou d'inclinaison avant intégration web. - Pour obtenir une déclaration CSS font-variation-settings valide et conforme à la spécification CSS Fonts Level 4. ## Fonctionnement - Téléversez votre fichier de police variable aux formats TTF, OTF, WOFF ou WOFF2. - Définissez éventuellement des coordonnées d'axes cibles et un texte personnalisé pour la prévisualisation. - L'outil extrait les métadonnées de la table fvar et génère un aperçu interactif avec le code CSS associé. ## Cas d'usage - Inspection des métadonnées typographiques et validation des instances nommées d'une fonte variable. - Génération de blocs @font-face et de règles CSS font-variation-settings pour un système de design. - Ajustement fin d'axes paramétriques spécifiques pour calibrer des styles de titrage ou de texte courant. ## Questions fréquentes ### Quels formats de fichiers de polices sont acceptés ? L'outil accepte les fichiers TTF, OTF, WOFF et WOFF2 d'une taille maximale de 15 Mo. ### Comment sont triés les axes dans la propriété CSS générée ? Les étiquettes d'axes sont dédupliquées et triées par ordre croissant d'unités de code, conformément à la norme CSS Fonts Level 4. ### L'outil propose-t-il des propriétés CSS standard alternatives ? Oui, pour les axes standards reconnus (comme wght, wdth, slnt/ital ou opsz), les propriétés de haut niveau équivalentes (font-weight, font-width, font-style, font-optical-sizing) sont fournies. ### Mes fichiers de polices sont-ils envoyés sur un serveur tiers ? Non, l'analyse de la table fvar et la décompression WOFF2 s'exécutent localement dans votre navigateur via WebAssembly et JavaScript. ### Que se passe-t-il si je ne saisis aucune valeur d'axe manuellement ? L'outil utilise les valeurs par défaut enregistrées dans la table fvar de la police et affiche l'ensemble des instances nommées disponibles. ## Outils associés - [Extracteur de texte barre PDF](https://elysiatools.com/fr/tools/pdf-strikethrough-review-extractor): Detecte le texte barre dans les PDF de revision et genere un rapport pour contrats et brouillons - [Générateur de cues de lecture synchronisée](https://elysiatools.com/fr/tools/audio-read-along-cue-generator): Génère des cues au niveau phrase ou mot avec timestamps à partir d'un audio et de son script. - [Inspecteur de fichiers de police (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/fr/tools/font-file-inspector): Téléversez une police TTF, OTF, WOFF ou WOFF2 (WOFF2 décompressée automatiquement) et inspectez toutes les métadonnées : famille/sous-famille/designer/copyright/version, nombre de glyphes, unitsPerEm, graisse et largeur, angle italique, drapeaux de style et boîte englobante ; carte thermique de couverture par blocs Unicode ; aperçu SVG des glyphes (texte personnalisable, échantillonnage auto pour les fontes d'icônes) ; ligatures liga et fonctionnalités OpenType ; axes fvar et instances nommées des fontes variables. - [De la palette d’image aux design tokens](https://elysiatools.com/fr/tools/image-to-design-tokens): Extrait les couleurs dominantes d’une image par k-means et les exporte en variables CSS / SCSS / config Tailwind / tokens JSON, avec noms et échelle de teintes - [Analyseur d image VP8](https://elysiatools.com/fr/tools/vp8-image-analyzer): Analyse une image WebP/VP8 avec Sharp, genere une displacement map en niveaux de gris et rend un relief 3D avec Three.js - [Calculateur clamp de typographie fluide CSS](https://elysiatools.com/fr/tools/css-fluid-typography-clamp-calc): Saisit les bornes de viewport et de taille pour obtenir clamp(), du CSS copiable et des donnees d apercu - [Planificateur de migration CSV vers base de donnees](https://elysiatools.com/fr/tools/csv-to-database-migration-planner): Infere un schema relationnel a partir dun CSV et genere CREATE TABLE et ALTER pour PostgreSQL, MySQL, SQLite ou SQL Server - [Stéganographie d'image : incorporation et détection](https://elysiatools.com/fr/tools/image-steganography-embed-detect): Cache du texte dans les bits de poids faible d'un PNG, l'extrait en retour et lance la stéganalyse chi-carré de Westfeld–Pfitzmann avec courbe p glissante et aperçu du plan LSB. ## Exemples - [Exemples de Polices Variables](https://elysiatools.com/fr/samples/variable-font-samples): Fichiers de polices variables avec axes fvar pour l'inspecteur d'axes/instances et le constructeur CSS - [Exemples du Framework CSS Bulma](https://elysiatools.com/fr/samples/bulma): Exemples du framework CSS Bulma incluant les colonnes, composants, contrôles de formulaire, système de mise en page et modèles de conception modernes basés sur CSS - [Exemples de Sélecteurs CSS](https://elysiatools.com/fr/samples/css-selectors): Collection d'exemples de sélecteurs CSS pour les tests d'extraction et d'analyse - [Exemples de Code avec Noms de Variables Invalides](https://elysiatools.com/fr/samples/code-invalid-variable-names-samples): Fichiers de code d'échantillon démontrant des conventions de nommage de variables invalides dans différents langages de programmation