가변 글꼴 애니메이터

온라인에서 가변 글꼴 축을 사용하여 텍스트에 애니메이션 적용

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 스니펫을 복사합니다.

  • 가변 글꼴 텍스트 애니메이션은 어떻게 작동하나요?CSS font-variation-settings을 사용하여 OpenType 가변 글꼴 축에 애니메이션을 적용합니다. 텍스트는 브라우저에서 선택 가능하고 렌더링된 상태로 유지됩니다.
  • 프론트엔드에서만 실행되나요?그렇습니다. 이 MVP은 샘플 웹 글꼴과 브라우저 CSS만을 사용합니다. 실시간 미리보기에는 백엔드 처리가 필요하지 않습니다.
  • 어떤 글꼴 축에 애니메이션을 적용할 수 있나요?선택한 가변 글꼴이 노출되면 무게, 너비, 광학 크기, 경사 및 사용자 정의 축에 애니메이션을 적용할 수 있습니다.
  • 애니메이션을 내보낼 수 있나요?첫 번째 버전은 HTML 및 CSS을 내보냅니다. 최신 버전에서는 업로드된 글꼴, 유효성 검사 및 더욱 풍부한 애니메이션 내보내기를 위해 글꼴 도구에 연결할 수 있습니다.

  • 라이브 모션 미리보기

    샘플 가변 글꼴과 브라우저 기본 CSS을 사용하여 애니메이션 타이포그래피를 즉시 미리 볼 수 있습니다.

  • 모션 컨트롤

    키프레임을 수동으로 작성하지 않고도 축 범위, 타이밍 및 문자 지연을 제어할 수 있습니다.

  • 프런트엔드 내보내기

    랜딩 페이지, UI 프로토타입 또는 실험에 적용할 수 있는 HTML 및 CSS을 복사하세요.
© Aspose Pty Ltd 2001-2026. All Rights Reserved.