Несколько шрифтов, один запрос @ font-face

118

Мне нужно импортировать шрифт 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;
}
css fonts font-face Rvervuurt
источник
4
Это не один шрифт ... это несколько шрифтов ... поэтому, к сожалению, я думаю, вам придется просто усмехнуться и вытерпеть это.
Paulie_D
Да, извините, это разные шрифты в одном семействе.
Rvervuurt
Несколько файлов веб-шрифтов === разный вес
Эрик
2
эта статья может помочь: 456bereastreet.com/archive/201012/… на самом деле здесь есть SO-ответ: stackoverflow.com/questions/10045859/…, который использует эту статью, альтернатива тому, что вы хотите, поскольку то, что вы хотите, невозможно.
97ldave 03 фев.15,

Ответы:

271

На самом деле есть особая разновидность @ 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;
}

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

ПРИМЕР ПЕРА

maioman
источник
1
так же, как я предложил в своем комментарии выше ;-)
97ldave
4
В моем случае используется только самый низкий @ font-face. Это будет font-weight: bold; стиль шрифта: курсив; каждый раз я обращаюсь к семейству шрифтов: 'DroidSerif';
Саймон Арнольд
1
Есть ли у вас тест, подтверждающий, что этот метод действительно работает? Как вы докажете, что браузер не подделывает вес или стиль, не прочитав правильный файл шрифта?
rojobuffalo
1
@rojobuffalo вот пример пера, он работает как и ожидалось.
майоман
2
@rojobuffalo очень убедительно высказывается. Перо ничего не делает для проверки правильности утверждения, что это будет вести себя так, как ожидалось. В частности, я удалил полужирное объявление font-face из примера CSS и запустил его снова. Внешний вид был идентичен. Вытаскивал из кеша? Браузер просто менял отображаемый вес обычного шрифта?
10 
@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;
}
Мирка Нимсова
источник
17
Пожалуйста, напишите небольшое объяснение, почему это решит проблему. Это может быть что-то простое, например предложение.
ggderas
3
То же решение, что и предыдущее. Только более короткие обозначения :)
Mirka Nimsová
2
Где я могу прочитать об этих обозначениях? Не вижу на MDN
avalanche1
Кажется, это не работает, и я не могу найти ресурс, но, похоже, в этом есть доля правды.
dakab