Wiele wag czcionek, jedno zapytanie @ font-face

Muszę zaimportować czcionkę Klavika i otrzymałem ją w wielu kształtach i rozmiarach:

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

Teraz chciałbym wiedzieć, czy można je zaimportować do CSS za pomocą jednego zapytania @font-face, w którym definiuję weightw zapytaniu. Chcę uniknąć kopiowania / wklejania zapytania 8 razy.

Więc coś takiego:

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

W rzeczywistości istnieje specjalny rodzaj @ font-face, który pozwala na to, o co prosisz.

Oto przykład użycia tej samej nazwy rodziny czcionek z różnymi stylami i wagami powiązanymi z różnymi czcionkami:

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

Możesz teraz określić font-weight:boldlub font-style:italicdo dowolnego elementu, który chcesz, bez konieczności określania rodziny czcionek lub nadpisywania font-weighti font-style.

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

Pełne omówienie tej funkcji i jej standardowego zastosowania znajduje się w tym artykule.

PRZYKŁADOWY 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;
}