Animador de fonte variável

Animar texto com eixos de fonte variáveis online

Animate variable fonts with CSS.

Gerado HTML e CSS

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..1000,25..151&amp;display=swap">

<style>
.variable-font-animation {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 72px;
  line-height: 1.05;
  font-synthesis: none;
  font-variation-settings: 'opsz' 14, 'wght' 100, 'wdth' 100;
}

.variable-font-animation span {
  display: inline-block;
  animation: variable-font-axis 1600ms ease-in-out infinite alternate;
  font-variation-settings: 'opsz' 14, 'wght' 100, 'wdth' 100;
  font-weight: 100;
  white-space: pre-wrap;
}

@keyframes variable-font-axis {
  from {
    font-variation-settings: 'opsz' 14, 'wght' 100, 'wdth' 100;
    font-weight: 100;
  }
  to {
    font-variation-settings: 'opsz' 14, 'wght' 1000, 'wdth' 100;
    font-weight: 1000;
  }
}
</style>

<div class="variable-font-animation" aria-label="Animate variable fonts with CSS."><span style="animation-delay: 0ms;">A</span><span style="animation-delay: 70ms;">n</span><span style="animation-delay: 140ms;">i</span><span style="animation-delay: 210ms;">m</span><span style="animation-delay: 280ms;">a</span><span style="animation-delay: 350ms;">t</span><span style="animation-delay: 420ms;">e</span><span style="animation-delay: 490ms;"> </span><span style="animation-delay: 560ms;">v</span><span style="animation-delay: 630ms;">a</span><span style="animation-delay: 700ms;">r</span><span style="animation-delay: 770ms;">i</span><span style="animation-delay: 840ms;">a</span><span style="animation-delay: 910ms;">b</span><span style="animation-delay: 980ms;">l</span><span style="animation-delay: 1050ms;">e</span><span style="animation-delay: 1120ms;"> </span><span style="animation-delay: 1190ms;">f</span><span style="animation-delay: 1260ms;">o</span><span style="animation-delay: 1330ms;">n</span><span style="animation-delay: 1400ms;">t</span><span style="animation-delay: 1470ms;">s</span><span style="animation-delay: 1540ms;"> </span><span style="animation-delay: 1610ms;">w</span><span style="animation-delay: 1680ms;">i</span><span style="animation-delay: 1750ms;">t</span><span style="animation-delay: 1820ms;">h</span><span style="animation-delay: 1890ms;"> </span><span style="animation-delay: 1960ms;">C</span><span style="animation-delay: 2030ms;">S</span><span style="animation-delay: 2100ms;">S</span><span style="animation-delay: 2170ms;">.</span></div>

Aspose.FontAspose.Font Web Applications

Buy

Fontes variáveis possibilitam animar tipografia sem trocar arquivos de fontes ou renderizar texto como imagens. Este Variable Font Animator online altera os eixos de variação OpenType, como peso, largura, tamanho óptico, inclinação e eixos personalizados com CSS.

A primeira versão roda totalmente no navegador. Escolha uma fonte de amostra, selecione um eixo, ajuste as configurações de movimento e copie o HTML e CSS gerados. É um front-end leve MVP destinado à experimentação rápida antes que fluxos de trabalho de exportação mais profundos sejam conectados.

  • Anime eixos de fontes variáveis ​​diretamente no seu navegador.
  • Escolha amostras de fontes variáveis e predefinições de movimento prontas.
  • Ajuste o intervalo do eixo animado, a duração, o escalonamento e o texto de visualização.
  • Copie HTML e CSS para uma animação de fonte variável somente frontend.

Como animar texto de fonte variável

  • Escolha uma fonte variável de amostra.
  • Selecione o eixo que deseja animar, como peso, largura, tamanho óptico ou inclinação.
  • Escolha uma predefinição e ajuste a duração, o escalonamento e os valores do eixo de/para.
  • Edite o texto de visualização para testar a animação em um layout realista.
  • Copie o snippet HTML e CSS gerado para seu frontend.

  • Como funciona a animação de texto com fonte variável?Ele anima OpenType eixos de fontes variáveis com CSS font-variation-settings. O texto permanece selecionável e renderizado pelo navegador.
  • Isso funciona apenas no frontend?Sim. Este MVP usa amostras de fontes da web e navegador CSS apenas. Nenhum processamento de back-end é necessário para a visualização ao vivo.
  • Quais eixos de fonte podem ser animados?Peso, largura, tamanho óptico, inclinação e eixos personalizados podem ser animados quando a fonte variável selecionada os expõe.
  • Posso exportar a animação?A primeira versão exporta HTML e CSS. Versões posteriores podem se conectar a ferramentas de fontes para upload de fontes, validação e exportações de animações mais ricas.

  • Visualização de movimento ao vivo

    Visualize imediatamente a tipografia animada com exemplos de fontes variáveis e CSS nativos do navegador.

  • Controles de movimento

    Controle o intervalo do eixo, o tempo e os atrasos das letras sem escrever quadros-chave manualmente.

  • Exportação de front-end

    Copie HTML e CSS que podem ser adaptados para landing pages, protótipos de UI ou experimentos.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.