Кілька вагових шрифтів, один @ шрифт-обличчя

Мені потрібно імпортувати шрифт 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

Тепер я хотів би знати, чи можна імпортувати їх у CSS лише одним @font-faceзапитом, де я визначаю 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-weight:boldабо font-style:italicбудь-який елемент, який вам подобається, не вказуючи сімейство шрифтів або переопределення font-weightта font-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;
}