단일 @font-face 쿼리로 여러 글꼴 두께를 가져올 수 있나요?

@font-face를 사용하여 여러 글꼴 두께 쿼리

다음과 같이 다양한 두께와 스타일로 여러 글꼴 변형을 사용할 수 있는 상황에서 언급된 Klavika 글꼴을 사용하면 반복적인 작업을 피하기 위해 이러한 가져오기를 단일 @font-face 쿼리로 통합할 수 있는지 문의하는 것이 당연합니다. 복사합니다.

답은 쿼리 자체 내에서 가중치를 정의할 수 있는 @font-face의 특수한 형식에 있습니다.

예를 들어 다양한 가중치와 스타일을 가진 Klavika 제품군을 가져오려면 , 다음을 활용할 수 있습니다.

@font-face {
  font-family: "Klavika";
  src: url("Klavika-Regular.otf") format("truetype") weight:normal;
  src: url("Klavika-Bold.otf") format("truetype") weight:bold;
  src: url("Klavika-Regular-Italic.otf") format("truetype") weight:normal style:italic;
  src: url("Klavika-Bold-Italic.otf") format("truetype") weight:bold style:italic;
}

이 접근 방식을 사용하면 명시적으로 선언할 필요 없이 모든 요소에 대해 글꼴 두께 또는 글꼴 스타일을 지정할 수 있습니다. 글꼴 모음 또는 이전에 설정된 글꼴 두께 및 스타일을 재정의합니다. 예:

body { font-family:"Klavika", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

위 내용은 단일 @font-face 쿼리로 여러 글꼴 두께를 가져올 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!