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.

Elysia Tools

Navigation mobile

Design

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.

Détails

Ce que cet outil vous aide à faire

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.

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exemples

Exemples adaptés à cet outil

Associé

Constructeur d’axes et d’instances de polices variables et de CSS font-variation-settings

Ce que cet outil vous aide à faire

Exécuter cet outil

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Inspection et configuration de la police Cabin Variable

2. Analyse d'une police paramétrique complexe

FAQ

Exemples de Polices Variables

Exemples du Framework CSS Bulma

Exemples de Sélecteurs CSS

Exemples de Code avec Noms de Variables Invalides

Extracteur de texte barre PDF

Générateur de cues de lecture synchronisée

Inspecteur de fichiers de police (TTF / OTF / WOFF / WOFF2)

De la palette d’image aux design tokens