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

css fonts font-face

— Rvervuurt
źródło

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

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

tak jak zasugerowałem w moim komentarzu powyżej ;-)

— 97ldave

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

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

@rojobuffalo oto przykładowe pióro, działa zgodnie z oczekiwaniami.

— maioman

@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?

@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

Napisz krótkie wyjaśnienie, dlaczego to rozwiązałoby problem. Może to być coś prostego jak zdanie.

— ggderas

Takie samo rozwiązanie jak poprzednie. Tylko krótszy zapis :)

— Mirka Nimsová

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