여러 글꼴 두께, 하나의 @ 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-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;
}

---

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

---

EXAMPLE PEN

---

@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;
}

참고URL : https://stackoverflow.com/questions/28279989/multiple-font-weights-one-font-face-query