Wiele wag czcionek, jedno zapytanie @ font-face

118

Muszę zaimportować czcionkę Klavika i otrzymałem ją w wielu kształtach i rozmiarach:

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

Teraz chciałbym wiedzieć, czy można je zaimportować do CSS za pomocą jednego zapytania @font-face, w którym definiuję weightw zapytaniu. Chcę uniknąć kopiowania / wklejania zapytania 8 razy.

Więc coś takiego:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}
Rvervuurt
źródło
4
To nie jest jedna czcionka ... to wiele czcionek ... więc niestety myślę, że musiałbyś po prostu się uśmiechnąć i znieść.
Paulie_D
Tak, przepraszam, to różne czcionki w tej samej rodzinie.
Rvervuurt
Wiele plików czcionek internetowych === różne wagi
Eric
2
ten artykuł może pomóc: 456bereastreet.com/archive/201012/ ... w rzeczywistości jest tutaj odpowiedź SO: stackoverflow.com/questions/10045859/ ... która używa tego artykułu, alternatywa dla tego, co chcesz, nie jest możliwa.
97ldave

Odpowiedzi:

270

W rzeczywistości istnieje specjalny rodzaj @ font-face, który pozwala na to, o co prosisz.

Oto przykład użycia tej samej nazwy rodziny czcionek z różnymi stylami i wagami powiązanymi z różnymi czcionkami:

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

Możesz teraz określić font-weight:boldlub font-style:italicdo dowolnego elementu, który chcesz, bez konieczności określania rodziny czcionek lub nadpisywania font-weighti font-style.

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

Pełne omówienie tej funkcji i jej standardowego zastosowania znajduje się w tym artykule.


PRZYKŁADOWY PEN

maioman
źródło
1
tak jak zasugerowałem w moim komentarzu powyżej ;-)
97ldave
4
W moim przypadku używa się tylko najniższego @ font-face. To byłaby waga czcionki: pogrubiona; styl czcionki: kursywa; za każdym razem, gdy odnoszę się do rodziny czcionek: „DroidSerif”;
Simon Arnold
1
Czy masz test, który dowodzi, że ta metoda faktycznie działa? Jak możesz udowodnić, że przeglądarka nie tylko udaje wagę lub styl bez czytania prawidłowego pliku czcionki?
rojobuffalo
1
@rojobuffalo oto przykładowe pióro, działa zgodnie z oczekiwaniami.
maioman
2
@rojobuffalo to bardzo ważny punkt. Pióro nie robi nic, aby zweryfikować słuszność twierdzenia, że ​​będzie się to zachowywało zgodnie z oczekiwaniami. W szczególności usunąłem pogrubioną deklarację czcionki z przykładu CSS i uruchomiłem ją ponownie. Wygląd był identyczny. Czy to wyciągało z pamięci podręcznej? Czy przeglądarka po prostu manipulowała wyświetlaną wagą zwykłej czcionki?
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;
}
Mirka Nimsová
źródło
17
Napisz krótkie wyjaśnienie, dlaczego to rozwiązałoby problem. Może to być coś prostego jak zdanie.
ggderas
3
Takie samo rozwiązanie jak poprzednie. Tylko krótszy zapis :)
Mirka Nimsová
2
Gdzie mogę przeczytać o tych zapisach? Nie widzę tego na MDN
lawina
Wydaje się, że to nie działa i nie mogę znaleźć źródła, ale wydaje się, że jest w tym trochę prawdy.
dakab