단일 @font-face 쿼리로 여러 글꼴 두께를 가져올 수 있나요?-CSS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2024-11-15 05:04:02

원래의

315명이 탐색했습니다.

Can I Import Multiple Font Weights with a Single @font-face Query?

@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 중국어 웹사이트의 기타 관련 기사를 참조하세요!