Beberapa bobot font, satu kueri @ font-face

Saya harus mengimpor font Klavika dan saya telah menerimanya dalam berbagai bentuk dan ukuran:

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

Sekarang saya ingin tahu apakah mungkin untuk mengimpornya ke CSS hanya dengan satu @font-face-query, di mana saya mendefinisikannya weightdalam kueri. Saya ingin menghindari menyalin / menempel kueri 8 kali.

Jadi sesuatu seperti:

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

Sebenarnya ada rasa khusus dari @ font-face yang akan mengizinkan apa yang Anda tanyakan.

Berikut adalah contoh menggunakan nama font-family yang sama dengan gaya dan bobot berbeda yang terkait dengan font berbeda:

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

Anda sekarang dapat menentukan font-weight:boldatau font-style:italicke elemen apa pun yang Anda suka tanpa harus menentukan font-family atau menimpa font-weightdan font-style.

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

Untuk gambaran umum lengkap tentang fitur ini dan penggunaan standar, lihat artikel ini.

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