가변 글꼴이란 무엇이며 어떻게 사용할 수 있습니까?

가변 글꼴은 모든 너비, 두께 또는 스타일에 대해 별도의 글꼴 파일을 보유하지 않고 서체의 다양한 변형을 단일 파일로 결합할 수 있는 OpenType 글꼴 사양의 발전입니다.

🤔 어떤 혜택이 있나요?

이러한 글꼴을 사용하면 단일 글꼴 파일에 여러 스타일을 제공하여 웹 사이트를 보다 지속 가능하고 작고 빠르게 만들 수 있을 뿐만 아니라 디자이너에게 더 많은 표현을 제어할 수 있습니다.

널리 지원됩니까?

아직은 아니지만 여기link에서 최신 업데이트를 확인할 수 있습니다.

축 🤔이란 무엇입니까?

변형 축은 사용자가 변경할 수 있는 서체 디자인의 단일 측면을 나타냅니다.

축의 종류

축은 등록 및 사용자 지정의 두 가지 유형으로 나뉩니다. CSS에서 등록된 축의 약어는 소문자로, 커스텀 축의 약어는 대문자로 표기합니다.

등록된 축은 표준 CSS 속성에 매핑됩니다. 사용자 정의 축은 새로운 CSS 속성인 font-variation-settings를 사용하여 참조할 수 있습니다.

등록된 축은 다음과 같습니다.

가중치(축 태그: wght, CSS 속성: font-weight)

너비(축 태그: wdth, CSS 속성: font-stretch)

시각적 크기(축 태그: opsz, CSS 속성: font-optical-sizing)

slant(축 태그: slnt, CSS 속성: font-style: italic)

기울임꼴(축 태그: ital, CSS 속성: font-style: oblique)

어떻게 사용할 수 있습니까?

먼저 선택한 글꼴이 가변 글꼴인지 확인해야 합니다.

두 가지 방법으로 등록된 글꼴 변형 값을 정의할 수 있습니다.

CSS 속성 사용

  font-weight: 300;

또는 font-variation-settings 속성 내에서 축 태그 사용

  font-variation-settings: "wght" 300;

예를 들어 Open Sans 글꼴을 사용해 봅시다. 이것은 Google fonts의 가변 글꼴입니다. 이 글꼴의 두께와 너비를 변경할 수 있으며 Italic 스타일을 추가할 수 있습니다.

가변 글꼴로 텍스트를 애니메이션으로 만들 수 있나요🤔?

예, 할 수 있습니다 😁. 이 비디오 👇를 확인할 수 있습니다.

결론

가변 글꼴은 사용하기 좋으며 이러한 글꼴로 복잡한 텍스트 애니메이션을 만들 수 있습니다. CodePen에 멋진 아이디어가 많이 있습니다. 그리고 이미 이 글꼴로 멋진 텍스트 애니메이션을 만들었다면 아래 댓글에서 공유할 수 있습니다 😁.

멋진 사람들을 유지하고 좋은 하루 보내세요 😎

추가 링크

V-fonts

Fonts arena

Movement - variable font

Variable fonts - Google fonts

Loading variable fonts on the web - Google fonts

Designing with Variable Fonts - Google fonts