여러 글꼴 두께, 하나의 @ 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-query 로 CSS로 가져올 수 있는지 알고 싶습니다 weight. 쿼리 복사 / 붙여 넣기를 8 번 피하고 싶습니다.

그래서 다음과 같습니다.

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

실제로 당신이 요구하는 것을 허용하는 @ font-face의 특별한 맛이 있습니다.

다음은 서로 다른 글꼴과 연관된 서로 다른 스타일 및 가중치를 가진 동일한 글꼴 계열 이름을 사용하는 예입니다.

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

이제 font-family를 지정하거나 및을 재정의하지 않고도 원하는 요소를 지정 font-weight:bold하거나 지정할 수 있습니다 .font-style:italicfont-weightfont-style

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

이 기능과 표준 사용에 대한 전체 개요는 이 문서를 참조하십시오.

예제 펜

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