# Construtor de eixos e instâncias de fontes variáveis e CSS font-variation-settings Envie uma fonte variável (TTF/OTF/WOFF/WOFF2) para inspecionar seus eixos fvar e instâncias nomeadas, pré-visualizar a interpolação ao vivo no navegador e gerar CSS font-variation-settings pronto para colar, as propriedades de alto nível equivalentes e um bloco @font-face variável. > Página canônica: https://elysiatools.com/pt/tools/variable-font-axis-instance-and-css-font-variation-settings-builder - **Categoria:** Design - **Palavras-chave:** fonte variável, eixos fvar, instâncias nomeadas, css font-variation-settings, pré-visualização de fonte variável, inspecionar woff2 ## Visão geral Lê a tabela fvar do OpenType (eixos com min/padrão/máx e instâncias nomeadas) via opentype.js, com WOFF2 descomprimida pelo port WebAssembly wawoff2. A geração de CSS segue o CSS Fonts Level 4 §8.2: tags de eixo diferenciam maiúsculas, repetições mantêm o último valor e a lista emitida é deduplicada e ordenada de forma crescente por unidade de código, igual ao valor computado da especificação. Quando existem propriedades de alto nível (wght→font-weight, wdth→font-width, slnt/ital→font-style com ângulo negado, opsz→font-optical-sizing), elas são emitidas como alternativa recomendada. A pré-visualização incorpora a fonte como @font-face data-URI, renderiza os extremos de cada eixo, todas as instâncias nomeadas, suas coordenadas personalizadas e um playground de controles que imprime o CSS ao vivo. ## Entradas - **Arquivo de fonte** (file): Upload a variable font (.ttf / .otf / .woff / .woff2) - **Valores dos eixos** (textarea): e.g. wght=625, wdth=110 — leave empty to inspect the font defaults - **Texto de pré-visualização** (text): Defaults to "Handgloves 0123 — AaBbGgQqRr ÄÖÜ äöü ß ½ ¼ ←→" ## Quando usar - Ao precisar extrair os limites mínimo, padrão e máximo de eixos de uma fonte TTF, OTF, WOFF ou WOFF2. - Ao testar a interpolação visual de pesos, larguras ou eixos paramétricos antes de implementar no código. - Ao gerar declarações de CSS font-variation-settings e propriedades de alto nível compatíveis com CSS Fonts Level 4. ## Como funciona - O arquivo de fonte é lido localmente e tem sua tabela OpenType fvar decodificada via opentype.js (com descompressão WOFF2 via WebAssembly). - A ferramenta mapeia todos os eixos registrados ou customizados, suas instâncias nomeadas e os valores definidos pelo usuário. - O texto informado é renderizado dinamicamente via @font-face data-URI em um playground de controles deslizantes. - O código CSS canônico é gerado com eixos deduplicados, ordenados por código e acompanhados de equivalentes de alto nível como font-weight ou font-width. ## Casos de uso - Auditoria técnica de arquivos de tipografia para identificar instâncias nomeadas e faixas de eixos disponíveis. - Ajuste fino de coordenadas numéricas de eixos ópticos (opsz) ou de peso (wght) para design systems web. - Geração rápida de blocos @font-face e classes CSS padronizadas para folhas de estilo front-end. ## Perguntas frequentes ### Quais formatos de arquivo de fonte variável são suportados? A ferramenta aceita arquivos nos formatos .ttf, .otf, .woff e .woff2 com limite de até 15 MB. ### Como a ferramenta lida com tags de eixo repetidas no campo de valores? Seguindo a especificação CSS Fonts Level 4 §8.2, tags repetidas mantêm o último valor informado e a saída final é deduplicada. ### O que são as propriedades de alto nível sugeridas no resultado? São propriedades padrão como font-weight, font-width e font-optical-sizing recomendadas pela especificação em vez de font-variation-settings direto quando houver suporte. ### A fonte é enviada para algum servidor externo? Não. A análise da tabela fvar e a renderização acontecem diretamente no seu navegador. ### É possível inspecionar fontes paramétricas com eixos customizados em maiúsculas? Sim. A ferramenta preserva a diferenciação de maiúsculas e minúsculas das tags de quatro caracteres, como GRAD, XTRA e opsz. ## Ferramentas relacionadas - [Extrator de revisao com tachado em PDF](https://elysiatools.com/pt/tools/pdf-strikethrough-review-extractor): Detecta texto riscado em PDFs revisados e gera um relatorio para contratos e revisoes - [Gerador de cues de leitura sincronizada](https://elysiatools.com/pt/tools/audio-read-along-cue-generator): Gera cues a nível de frase ou palavra com timestamps a partir de áudio de narração e seu roteiro. - [Inspetor de arquivos de fonte (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/pt/tools/font-file-inspector): Envie uma fonte TTF, OTF, WOFF ou WOFF2 (WOFF2 é descomprimida automaticamente) e inspecione todos os metadados: família/subfamília/designer/copyright/versão, número de glifos, unitsPerEm, peso e largura, ângulo itálico, bandeiras de estilo e caixa delimitadora; mapa de calor de cobertura por blocos Unicode; pré-visualização SVG de glifos (texto personalizável, amostra automática para fontes de ícones); ligaduras liga e recursos OpenType; eixos fvar e instâncias nomeadas de fontes variáveis. - [De paleta de imagem para design tokens](https://elysiatools.com/pt/tools/image-to-design-tokens): Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons - [Analisador de imagem VP8](https://elysiatools.com/pt/tools/vp8-image-analyzer): Analisa imagens WebP/VP8 com Sharp, gera um displacement map em escala de cinza e renderiza relevo 3D com Three.js - [Calculadora clamp de tipografia fluida CSS](https://elysiatools.com/pt/tools/css-fluid-typography-clamp-calc): Informe limites de viewport e fonte para gerar clamp(), CSS copiavel e dados de preview - [Planejador de migracao CSV para banco de dados](https://elysiatools.com/pt/tools/csv-to-database-migration-planner): Infere um schema relacional a partir de CSV e gera planos CREATE TABLE e ALTER para PostgreSQL, MySQL, SQLite ou SQL Server - [Esteganografia de imagem: embutir e detectar](https://elysiatools.com/pt/tools/image-steganography-embed-detect): Esconde texto nos bits menos significativos de um PNG, extrai de volta e roda a estegoanálise chi-quadrado de Westfeld–Pfitzmann com curva p deslizante e prévia do plano LSB. ## Exemplos - [Amostras de Fontes Variáveis](https://elysiatools.com/pt/samples/variable-font-samples): Arquivos de fontes variáveis com eixos fvar para o inspetor de eixos/instâncias e construtor CSS - [Exemplos do Framework CSS Bulma](https://elysiatools.com/pt/samples/bulma): Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS - [Exemplos de Seletores CSS](https://elysiatools.com/pt/samples/css-selectors): Coleção de exemplos de seletores CSS para testes de extração e análise - [Exemplos de Código com Nomes de Variáveis Inválidos](https://elysiatools.com/pt/samples/code-invalid-variable-names-samples): Arquivos de código de amostra demonstrando convenções de nomenclatura de variáveis inválidas em diferentes linguagens de programação