Несколько шрифтов-шрифтов, один запрос @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

Теперь я хотел бы знать, можно ли импортировать их в CSS только с одним @font-face -query, где я определяю weight в запросе. Я хочу избежать копирования/вставки запроса 8 раз.

Так что-то вроде:

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

Ответы

Ответ 1

На самом деле есть особый колорит @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;
}

Полный обзор этой функции и стандартного использования см. в в этой статье.

ПРИМЕР PEN