[css] @font-face로 폰트를 등록할 때 굵기별로 지정하는 방법

@font-face를 사용하여 폰트를 등록할 때, 굵기별로 폰트를 지정할 수 있습니다. 예를 들어, 다음과 같이 여러 굵기로 등록할 수 있습니다.

 

@font-face {
  font-family: 'MyFont';
  src: url('MyFont-Regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'MyFont';
  src: url('MyFont-Bold.woff2') format('woff2');
  font-weight: 700;
}

 

이 경우 font-wieght: 400과 font-weight: 700에 대해 각각의 폰트 파일이 지정되어 있습니다.

 

만약 폰트를 등록할 때 지정하지 않은 font-weight 값을 사용할 경우, 브라우저는 가장 가까운 굵기의 폰트를 적용합니다. 예를 들어, 위와 같이 font-weight: 400과 font-weight: 700이 등록된 상태에서 font-weight: 500을 사용하려고 한다면, 브라우저는 font-weight: 400 폰트를 사용합니다. 이는 font-weight: 500이 400에 더 가깝기 때문입니다.

 

일반적인 규칙은 다음과 같습니다.

1) 사용된 font-weight 값과 가장 가까운 값을 찾습니다.

2) 만약 같은 거리에 두 개 이상의 값이 있다면, 낮은 값이 선택됩니다.

 

따라서, font-weight를 지정하지 않은 경우에도 사용자가 지정한 굵기와 가장 근접한 굵기의 폰트가 적용되므로 원하지 않은 폰트 굵기가 적용될 수 있습니다. 이를 방지하려면 필요한 모든 굵기를 등록하거나, 부족한 굵기에 대해서는 가까운 값을 지정해주는 것이 좋습니다.