단일 @font-face 쿼리로 여러 글꼴 두께를 정의할 수 있습니까?

Klavika 글꼴은 다양한 두께와 모양으로 제공됩니다. 가중치를 지정하는 단일 @font-face 쿼리를 사용하여 이러한 항목을 CSS로 가져올 수 있습니까?

해결책:

@font-face의 다양한 기능을 소개합니다. 다양한 스타일과 두께를 단일 글꼴 모음 이름과 연결할 수 있습니다:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");  /* Normal weight, normal style */
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype"); /* Normal weight, italic style */
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");  /* Bold weight, normal style */
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype"); /* Bold weight, italic style */
}

이제 다양한 요소에 대해 글꼴 가중치:bold 또는 글꼴 스타일:이탤릭체를 지정할 수 있습니다.

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

이 기능에 대한 자세한 내용은 공식 문서를 참조하세요.

예:

[예제 펜](https://codepen .io/anon/pen/EjxVqv)