# Constructor de ejes e instancias de fuentes variables y CSS font-variation-settings Sube una fuente variable (TTF/OTF/WOFF/WOFF2) para inspeccionar sus ejes fvar e instancias con nombre, previsualizar la interpolación en vivo en el navegador y generar CSS font-variation-settings listo para pegar, las propiedades de alto nivel equivalentes y un bloque @font-face variable. > Página canónica: https://elysiatools.com/es/tools/variable-font-axis-instance-and-css-font-variation-settings-builder - **Categoría:** Design - **Palabras clave:** fuente variable, ejes fvar, instancias con nombre, css font-variation-settings, previsualización de fuente variable, inspeccionar woff2 ## Descripción general Lee la tabla fvar de OpenType (ejes con min/predeterminado/máx e instancias con nombre) mediante opentype.js, descomprimiendo WOFF2 con el puerto WebAssembly wawoff2. La generación de CSS sigue CSS Fonts Level 4 §8.2: las etiquetas de eje distinguen mayúsculas, las repeticiones conservan el último valor y la lista emitida se deduplica y ordena ascendentemente por unidad de código, igual que el valor computado de la especificación. Cuando existen propiedades de alto nivel (wght→font-weight, wdth→font-width, slnt/ital→font-style con el ángulo negado, opsz→font-optical-sizing) se emiten como alternativa recomendada. La previsualización incrusta la fuente como @font-face data-URI, renderiza los extremos de cada eje, todas las instancias con nombre, tus coordenadas personalizadas y un playground de deslizadores que imprime el CSS en vivo. ## Entradas - **Archivo de fuente** (file): Upload a variable font (.ttf / .otf / .woff / .woff2) - **Valores de ejes** (textarea): e.g. wght=625, wdth=110 — leave empty to inspect the font defaults - **Texto de previsualización** (text): Defaults to "Handgloves 0123 — AaBbGgQqRr ÄÖÜ äöü ß ½ ¼ ←→" ## Cuándo usarlo - Al implementar fuentes variables en CSS y requerir la sintaxis exacta normalizada según la especificación CSS Fonts Level 4. - Al auditar archivos tipográficos para extraer los rangos mínimos, máximos y valores por defecto de cada eje fvar, así como sus instancias con nombre. - Al calibrar coordenadas tipográficas personalizadas de peso, ancho u óptica visual mediante previsualización interactiva con deslizadores. ## Cómo funciona - Sube tu archivo tipográfico variable en formato TTF, OTF, WOFF o WOFF2. - Ingresa las coordenadas de los ejes deseadas en formato clave=valor o déjalo vacío para examinar las instancias predeterminadas. - Opcionalmente personaliza el texto de muestra para evaluar caracteres o glifos específicos. - Inspecciona la tabla de ejes e instancias y copia el bloque CSS generado con font-variation-settings y sus propiedades equivalentes. ## Casos de uso - Desarrolladores web que integran tipografías variables responsivas con ajustes de peso y ancho para distintos breakpoints. - Diseñadores UI/UX que exploran los límites de ejes no estándar (como GRAD o XTRA) para sistemas de diseño interactivos. - Diseñadores tipográficos que validan las instancias con nombre y los rangos de ejes tras compilar binarios de fuentes. ## Preguntas frecuentes ### ¿Qué formatos de fuentes variables son compatibles? Soporta archivos TTF, OTF, WOFF y WOFF2 mediante descompresión y lectura binaria en el navegador. ### ¿Cómo ordena la herramienta las etiquetas de los ejes en el CSS? Sigue CSS Fonts Level 4 §8.2, deduplicando etiquetas y ordenándolas ascendentemente por unidad de código de carácter. ### ¿Genera propiedades CSS de alto nivel? Sí, emite alternativas estándar recomendadas como font-weight, font-width, font-style (con ángulo invertido para slnt) y font-optical-sizing. ### ¿Puedo previsualizar instancias con nombre predefinidas en la fuente? Sí, la herramienta detecta todas las instancias con nombre declaradas en la tabla fvar y genera muestras visuales para cada una. ### ¿Se transfieren los archivos de fuentes a un servidor externo? No, todo el procesamiento, lectura de tablas OpenType y renderizado se realiza localmente en el navegador. ## Herramientas relacionadas - [Extractor de revision con tachado PDF](https://elysiatools.com/es/tools/pdf-strikethrough-review-extractor): Detecta texto tachado en PDFs de revision y genera un informe para contratos, politicas y borradores - [Generador de cues de lectura sincronizada](https://elysiatools.com/es/tools/audio-read-along-cue-generator): Genera cues a nivel de frase o palabra con timestamp desde un audio de narración y su guion, para lectura estilo karaoke. - [Inspector de archivos de fuente (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/es/tools/font-file-inspector): Sube una fuente TTF, OTF, WOFF o WOFF2 (la WOFF2 se descomprime automáticamente) e inspecciona todos los metadatos: familia/subfamilia/diseñador/copyright/versión, número de glifos, unitsPerEm, peso y anchura, ángulo itálico, banderas de estilo y caja envolvente; mapa de calor de cobertura por bloques Unicode; vista previa SVG de glifos (texto personalizable, muestreo automático para fuentes de iconos); ligaduras liga y características OpenType; ejes fvar e instancias con nombre en fuentes variables. - [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-design-tokens): Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos - [Analizador de imagen VP8](https://elysiatools.com/es/tools/vp8-image-analyzer): Analiza imagenes WebP/VP8 con Sharp, genera un mapa gris de desplazamiento y renderiza un relieve 3D con Three.js - [Calculadora clamp de tipografia fluida CSS](https://elysiatools.com/es/tools/css-fluid-typography-clamp-calc): Introduce viewport y tamaños mínimos y máximos para obtener clamp(), CSS copiable y datos de vista previa - [Planificador de migracion CSV a base de datos](https://elysiatools.com/es/tools/csv-to-database-migration-planner): Infiere un schema relacional desde CSV y genera planes CREATE TABLE y ALTER para PostgreSQL, MySQL, SQLite o SQL Server - [Esteganografía de imagen: incrustar y detectar](https://elysiatools.com/es/tools/image-steganography-embed-detect): Oculta texto en los bits menos significativos de un PNG, extráelo de vuelta y ejecuta el análisis esteganográfico chi-cuadrado de Westfeld–Pfitzmann con curva p y vista del plano LSB. ## Ejemplos - [Muestras de Fuentes Variables](https://elysiatools.com/es/samples/variable-font-samples): Archivos de fuentes variables con ejes fvar para el inspector de ejes/instancias y el constructor CSS - [Ejemplos del Framework CSS Bulma](https://elysiatools.com/es/samples/bulma): Ejemplos del framework CSS Bulma incluyendo columnas, componentes, controles de formulario, sistema de diseño y patrones de diseño modernos basados en CSS - [Ejemplos de Selectores CSS](https://elysiatools.com/es/samples/css-selectors): Colección de ejemplos de selectores CSS para pruebas de extracción y análisis - [Ejemplos de Código con Nombres de Variables Inválidos](https://elysiatools.com/es/samples/code-invalid-variable-names-samples): Archivos de código de muestra que demuestran convenciones de nomenclatura de variables inválidas en diferentes lenguajes de programación