이 기사에서는 가변 글꼴이 무엇인지, CSS로 애니메이션을 적용하는 방법, CSS 및 Javascript를 사용하여 호흡 효과를 만드는 방법에 대해 설명합니다.

https://365ok.co.kr/dn/ani-text2.html 

가변 글꼴 소개 

가변 글꼴은 웹 타이포그래피에서 흥미로운 새로운 개발입니다. 다양한 글꼴 파일을 사용하여 특정 글꼴의 다른 변형을 로드 하는 대신 가변 글꼴을 사용하여 단일 파일에서 모든 변형을 로드 할 수 있습니다. 대부분의 경우 이는 성능이 크게 향상됩니다 (파일 자체가 일반 글꼴 파일보다 큰 경향이 있기 때문에 실제로 필요한 경우 가변 글꼴 만 사용하는 것이 가장 좋습니다).

하나의 글꼴, 다양한 변형 

100의 배수 (예 : font-weight : 600)로만 제공되는 소수의 글꼴 가중치 대신 가변 글꼴은 단일 파일에서 다양한 값을 제공합니다. 무게는 그 범위 내 어디에서나 변할 수 있습니다. 따라서 글꼴 무게 : 372는 완벽하게 유효합니다!

변형의 축 

가중치는 변동 축 중 하나일 뿐입니다 (아마도 가장 일반적인 축일 수 있음). 가변 글꼴에도 다른 축이 있을 수 있습니다. 등록 된 축은 4 글자 태그에 해당합니다.

• weight (wght)
• width (wdth)
• italic (ital)
• slant (slnt)
• optical size (opsz)

이는 CSS 속성 및 값에 해당합니다.

• font-weight
• font-stretch
• font-style
• font-style
• font-optical-sizing

모든 가변 글꼴에 이러한 변형 축이 모두 포함되어있는 것은 아닙니다. 많은 사람들이 한두 가지만 포함합니다.

font-variation-settings 속성을 사용하여 액세스 할 수도 있습니다. 이 속성을 사용하면 표준 축뿐만 아니라 사용자 지정 축도 조정할 수 있습니다. 따라서 글꼴 가중치는 두 가지 방법으로 지정할 수 있습니다.

font-weight: 372;

또는

font-variation-settings: 'wght' 372;

font-weight를 사용하여 가변 글꼴을 지원하지 않는 브라우저에 폴백을 제공 할 수 있습니다.

맞춤 축 

맞춤형 축은 유형 디자이너에게 창의성을 위한 무한한 범위를 제공합니다! 사용자 지정 변형 축은 문자 그대로 어떤 것이 든 가능합니다. x- 높이와 같은 일부는 서체에 대해 일반적 일 수 있지만 더 많은 가능성이 있습니다.

font-variation-settings 속성을 사용하여 사용자 지정 축에 액세스 할 수 있지만 표준 축에 대해 설명하지 않은 경우 4 자 태그 이름은 대문자 여야 합니다. 가변 글꼴 NM 유형별 이동은 문자라는 곡률을 제어하는 ​​공백이라는 사용자 정의 축을 제공합니다.

font-variation-settings: 'wght' 200, 'SPAC' 118;

이 데모에서 다른 축으로 놀아보십시오.

CSS를 사용하여 변수 글꼴 애니메이션 

font-variation-settings는 애니메이션이 가능하며 100 단위가 아닌 다양한 값을 다루기 때문에 간단한 CSS 전환이나 키 프레임 애니메이션으로 정말 멋진 효과를 얻을 수 있습니다. 글꼴 IBM Plex Sans에는 무게와 너비의 두 가지 변형 축이 있습니다. 다음 코드는 두 축의 1s 반복 애니메이션을 설정합니다.

h1 {
	font-variation-settings: 'wght' 100, 'wdth' 85;
	animation: breathe 4000ms infinite forwards;
}

@keyframes breathe {
	60% {
		font-variation-settings: 'wght' 700, 'wdth' 100;
	}

	100% {
		font-variation-settings: 'wght' 100, 'wdth' 85;
	}
}

이것은 우리의 텍스트 호흡 효과를 줍니다.

또는 애니메이션 대신 전환 효과가 있는 멋진 호버 효과 일 수도 있습니다.

비틀 거리는 애니메이션 

전체 텍스트에 동일한 속도로 애니메이션을 적용하는 대신 문자 양식을 순서대로 애니메이션으로 만드는 것이 좋습니다. 텍스트의 각 문자를 <span>으로 감싸고 각 문자에 애니메이션 지연을 설정할 수 있습니다.

<h1>
	<span>B</span>
	<span>r</span>
	<span>e</span>
	<span>a</span>
	<span>t</span>
	<span>h</span>
	<span>i</span>
	<span>n</span>
	<span>g</span>
</h1>

h1 span:nth-child(2) {
	animation-delay: 400ms;
}

h1 span:nth-child(3) {
	animation-delay: 800ms;
}

h1 span:nth-child(4) {
	animation-delay: 1200ms;
}
/* etc...*/

글을 쓰는 데 약간의 노력이 필요하지만 (Sass를 사용하여 도움을 줄 수는 있지만) 나중에 텍스트 내용을 변경하기로 결정한 경우 유지 관리가 쉽지 않습니다.

그러나 약간의 자바 스크립트 만 사용하는 것이 마음에 들지 않으면 Splitting.js라는 훌륭한 라이브러리가 있습니다.

Splitting 

분할의 주요 사용 사례는 텍스트에 애니메이션을 적용하는 데 사용되지만 멋진 효과를 위해 격자와 레이아웃을 분할 할 수도 있습니다. 이를 사용하려면 프로젝트에 라이브러리를 포함 시킨 다음 애니메이션 하려는 요소에 데이터 분할 속성을 설정해야 합니다.

<h1 data-splitting>Breathing</h1>

이제 우리가 작성해야 할 JS는 매우 간단합니다.

Splitting()

분할하면 텍스트 요소가 각각 클래스, 데이터 속성 및 문자 인덱스 값을 가진 사용자 정의 속성 정의가 있는 일련의 <span> s로 분할 되어 CSS에서 액세스 할 수 있습니다.

<span class="word" data-word="Breathing" style="--word-index:0;">
	<span class="char" data-char="B" style="--char-index:0;">B</span>
	<span class="char" data-char="r" style="--char-index:1;">r</span>
	<span class="char" data-char="e" style="--char-index:2;">e</span>
	<span class="char" data-char="a" style="--char-index:3;">a</span>
	<span class="char" data-char="t" style="--char-index:4;">t</span>
	<span class="char" data-char="h" style="--char-index:5;">h</span>
	<span class="char" data-char="i" style="--char-index:6;">i</span>
	<span class="char" data-char="n" style="--char-index:7;">n</span>
	<span class="char" data-char="g" style="--char-index:8;">g</span>
</span>

순차적 애니메이션을 만들려면 calc()를 사용하여 사용자 정의 속성에서 각 문자의 애니메이션 지연 값을 계산할 수 있습니다.

h1 .char {
	--delay: calc((var(--char-index) + 1) * 400ms);
	animation: breathe 4000ms infinite both;
	animation-delay: var(--delay);
}

이는 우리가 작성해야 하는 CSS를 크게 줄이며, 나중에 텍스트를 변경하고 애니메이션이 완벽하게 작동 할 수 있음을 의미합니다!

Resources 

MDN’s Variable Fonts Guide 

MDN 가이드는 다양한 글꼴에 대해 배우고 사용하는 방법에 대한 훌륭한 자료입니다.

V-Fonts 

V- 글꼴은 변형 축과 찾을 수 있는 위치를 포함하여 수백 가지의 가변 글꼴 목록입니다. 유료 및 무료 / 오픈 소스 글꼴이 혼합되어 있으며 아직 큰 돈을 버리고 싶지 않다면 데모에 사용할 샘플을 찾을 수 있는 좋은 장소입니다.

Axis-Praxis 

Axis-Praxis는 다양한 글꼴을 실험하고 창의적인 가능성을 이해하기 위한 놀이터입니다. 정말 흥미롭고 창의적인 샘플이 포함되어 있습니다!

VariableFonts.dev 

Variablefonts.dev는 CSS 글꼴로 다양한 글꼴을 사용하여 경외심을 불러 일으키는 데모를 만들고 전 세계에 대해 이야기하는 것으로 유명한 Mandy Michael의 프로젝트입니다.

https://css-irl.info/variable-font-animation-with-css-and-splitting-js/