[CSS] 가변 폰트와 font-variation-settings

이런 신기한 폰트 애니메이션을 만들어보았다.

 

HTML

  <p class="font">H</p>

  <p class="font">E</p>

  <p class="font">L</p>

  <p class="font">L</p>

  <p class="font">O</p>

  <p class="font">W</p>

  <p class="font">O</p>

  <p class="font">R</p>

  <p class="font">L</p>

  <p class="font">D</p>

 

p태그에 따로따로 담아주었다.

 

CSS

@import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap');

.font{

  font-family: "Hepta Slab";

  text-align: center;

  margin-top: 300px;

  font-size: 60px;

  font-variation-settings: "wght"100;

  white-space: nowrap;

  float: left;

  animation: ani infinite cubic-bezier(0.215, 0.610, 0.355, 1) 2s;

}

.font:nth-child(2){

  animation-delay: 0.1s;

}

.font:nth-child(3){

  animation-delay: 0.2s;

}

.font:nth-child(4){

  animation-delay: 0.3s;

}

.font:nth-child(5){

  animation-delay: 0.4s;

}

.font:nth-child(6){

  animation-delay: 0.5s;

}

.font:nth-child(7){

  animation-delay: 0.6s;

}

.font:nth-child(8){

  animation-delay: 0.7s;

}

.font:nth-child(9){

  animation-delay: 0.8s;

}

.font:nth-child(10){

  animation-delay: 0.9s;

}

@keyframes ani{

  0%{

    font-variation-settings: "wght"100;

  }

  50%{

    font-variation-settings: "wght"900;

  }

  100%{

    font-variation-settings: "wght"100;

  }

}

가변 폰트를 import해주고 import한 폰트를 적용해 font-variation-settings를 이용한 애니메이션을 만들어보았다.

 

먼저 가변 폰트란? 쉽게 설명해서 font 찾다보면 variation이라고 적힌 폰트들이 같이 붙어있다. 그게 가변폰트이다.

이 가변폰트를 이용할 수 있는 css코드가 font-variation-settings다. "wght"를 100~900으로 조절해서 저렇게 폰트가 혼자 커졌다 작아졌다하는 애니메이션을 만들어서 각 글자에 animation-delay를 조절해서 파도타기처럼 만들었다. 

 

이것은 흥미로운 폰트 애니메이션 예제다! 가변 폰트와 font-variation-settings를 활용하여 글자의 두께를 조절하여 애니메이션 효과를 만들어내는 것은 창의적이고 독특한 방법이다.

실용성이 상대적으로 낮을 수 있지만, 이러한 실험적인 디자인은 창의성을 발전시키고 새로운 아이디어를 찾을 수 있는 좋은 방법일 수 있다. 또한, 이러한 효과를 조합하여 더 복잡하고 흥미로운 애니메이션을 만들 수도 있다.

웹 디자인 및 개발에서 실험을 통해 새로운 기술과 아이디어를 탐색하는 것은 항상 좋은 일이다. 실제로는 사용되지 않더라도 학습과 창의성에 큰 도움이 될 수 있다.

 

공유해주셔서 감사합니다!