バリアブルフォントアニメーター

オンラインで可変フォント軸を使用してテキストをアニメーション化する

Animate variable fonts with CSS.

HTML と 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

バリアブル フォントを使用すると、フォント ファイルを交換したり、テキストを画像としてレンダリングしたりせずに、タイポグラフィをアニメーション化することができます。このオンライン Variable Font Animator は、CSS を使用して、ウェイト、幅、光学サイズ、傾斜、カスタム軸などの OpenType バリエーション軸を変更します。

最初のバージョンはブラウザで完全に実行されます。サンプル フォントを選択し、軸を選択し、モーション設定を調整して、生成された HTML と CSS をコピーします。これは、より深いエクスポート ワークフローが接続される前の迅速な実験を目的とした軽量のフロントエンド MVP です。

  • ブラウザ内で変数フォント軸を直接アニメーション化します。
  • 既製の可変フォント サンプルとモーション プリセットを選択します。
  • アニメーション化された軸の範囲、期間、ずらし、およびプレビュー テキストを調整します。
  • フロントエンド専用の可変フォント アニメーションの場合は、HTML と CSS をコピーします。

可変フォントテキストをアニメーション化する方法

  • サンプルの可変フォントを選択します。
  • 重量、幅、光学サイズ、傾斜など、アニメーション化する軸を選択します。
  • プリセットを選択し、持続時間、スタッガー、開始/終了軸の値を調整します。
  • プレビュー テキストを編集して、現実的なレイアウトでアニメーションをテストします。
  • フロントエンド用に生成された HTML および CSS スニペットをコピーします。

  • 可変フォントのテキストアニメーションはどのように機能しますか?OpenType 可変フォント軸を CSS font-variation-settings でアニメーション化します。テキストはブラウザーによって選択可能のまま表示されます。
  • これはフロントエンドでのみ実行されますか?はい。この MVP は、サンプル Web フォントとブラウザ CSS のみを使用します。ライブ プレビューにはバックエンド処理は必要ありません。
  • どのフォント軸をアニメーション化できますか?ウェイト、幅、光学サイズ、傾斜、およびカスタム軸は、選択した可変フォントが表示されるときにアニメーション化できます。
  • アニメーションをエクスポートできますか?最初のバージョンは HTML と CSS をエクスポートします。新しいバージョンでは、アップロードされたフォント、検証、およびより豊富なアニメーションのエクスポートのためにフォント ツールに接続できます。

  • ライブモーションプレビュー

    サンプル可変フォントとブラウザネイティブの CSS を使用して、アニメーション化されたタイポグラフィをすぐにプレビューします。

  • モーションコントロール

    キーフレームを手動で書き込むことなく、軸の範囲、タイミング、文字遅延を制御します。

  • フロントエンドのエクスポート

    ランディング ページ、UI プロトタイプ、または実験に適用できる HTML と CSS をコピーします。
© Aspose Pty Ltd 2001-2026. All Rights Reserved.