Несколько весов шрифта, один @ 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-запрос, где я определение weight в запросе. Я хочу избежать копирования / вставки запроса 8 раз.

что-то вроде:

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

2 ответов


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