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.

Elysia Tools

Navegação

Design

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.

Detalhes

O que esta ferramenta ajuda você a fazer

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.

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Construtor de eixos e instâncias de fontes variáveis e CSS font-variation-settings

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Ajuste de peso e largura para fonte de interface

2. Inspeção completa de fonte paramétrica experimental

Perguntas frequentes

Amostras de Fontes Variáveis

Exemplos do Framework CSS Bulma

Exemplos de Seletores CSS

Exemplos de Código com Nomes de Variáveis Inválidos

Extrator de revisao com tachado em PDF

Gerador de cues de leitura sincronizada

Inspetor de arquivos de fonte (TTF / OTF / WOFF / WOFF2)

De paleta de imagem para design tokens