글꼴 선언 최적화: 단일 @font-face 쿼리로 여러 글꼴 가중치 가져오기

글꼴 모음이 여러 변형으로 구성된 시나리오에서 무게와 스타일이 다르므로 별도의 @font-face 쿼리를 사용하여 각 변형을 개별적으로 가져오는 것은 지루할 수 있습니다. 이 문서에서는 이러한 쿼리를 단일 선언으로 통합할 수 있는 가능성을 살펴봅니다.

과제: 여러 글꼴 가중치 가져오기

Klavika 글꼴을 다양한 형식으로 사용할 수 있는 시나리오를 고려해보세요. 무게 및 크기:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

이 작업은 가중치 매개변수를 정의하는 단일 @font-face 쿼리를 사용하여 이러한 변형을 CSS로 가져오는 것입니다. 이렇게 하면 쿼리를 여러 번 복사하고 붙여넣을 필요가 없습니다.

해결책: 확장 @font-face 구문 활용

다행히 @font-face는 확장된 구문을 제공합니다. 단일 글꼴 모음에 다양한 두께와 스타일 값을 할당할 수 있는 구문:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight: normal;
  src: url(../fonts/Klavika-Bold.otf), weight: bold;
}

이 예에서는:

• font-family: 'Klavika'는 글꼴 계열 이름을 정의합니다.
• src: url(..), 뒤에는 해당 가중치는 일반 및 굵은 변형에 대한 소스 파일을 지정합니다.

통합 글꼴 쿼리의 이점

글꼴 쿼리를 통합하면 다음과 같은 여러 이점이 제공됩니다.

• 코드 중복 감소: 각 가중치 변화에 대해 반복적인 @font-face 쿼리를 방지합니다.
• 가독성 향상: CSS 코드를 체계적이고 간결하게 유지합니다. .
• 보다 간편한 유지 관리: 글꼴 두께 변경은 한 위치에서 수행할 수 있습니다.

추가 리소스

이 기능과 표준 사용법에 대한 포괄적인 개요는 다음 문서를 참조하세요: [확장 @font-face 구문](https://developer.mozilla.org/en-US/docs/Web/CSS/@font -face.

펜 예

다음 펜 예에서 이 기술의 실시간 데모를 확인하세요. [단일 @font-face 쿼리를 사용한 여러 글꼴 가중치]( https://codepen.io/anon/pen/abvaqP).