Mehrere Schriftstärken, eine @ font-face-Abfrage

118

Ich muss die Klavika-Schrift importieren und habe sie in verschiedenen Formen und Größen erhalten:

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

Jetzt möchte ich wissen, ob es möglich ist, diese mit nur einer @font-faceAbfrage in CSS zu importieren, wo ich die weightin der Abfrage definiere. Ich möchte vermeiden, die Abfrage achtmal zu kopieren / einzufügen.

Also so etwas wie:

@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
quelle
4
Es ist nicht eine Schriftart ... es sind mehrere Schriftarten ... also denke ich, du müsstest leider nur grinsen und es ertragen.
Paulie_D
Ja, tut mir leid, es sind verschiedene Schriftarten innerhalb derselben Familie.
Rvervuurt
Mehrere Webfont-Dateien === unterschiedliche Gewichte
Eric
2
Dieser Artikel könnte helfen: 456bereastreet.com/archive/201012/… tatsächlich gibt es hier eine SO-Antwort: stackoverflow.com/questions/10045859/… , die diesen Artikel verwendet, eine Alternative zu dem, was Sie wollen, da das, was Sie wollen, nicht möglich ist.
97ldave

Antworten:

269

Tatsächlich gibt es eine spezielle Variante von @ font-face, die genau das zulässt, was Sie verlangen.

Hier ist ein Beispiel, in dem derselbe Name der Schriftfamilie mit unterschiedlichen Stilen und Gewichten für verschiedene Schriftarten verwendet wird:

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

Sie können nun festlegen , font-weight:boldoder font-style:italicauf ein beliebiges Element Sie , ohne wie die font-family angeben oder überschreiben font-weightund font-style.

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

Einen vollständigen Überblick über diese Funktion und die Standardverwendung finden Sie in diesem Artikel.

BEISPIELSTIFT

maioman
quelle
1
genau wie ich in meinem Kommentar oben vorgeschlagen habe
;-)
4
In meinem Fall wird hier nur das niedrigste @ font-face verwendet. Das wäre Schriftgröße: fett; Schriftstil: kursiv; jedes Mal, wenn ich mich auf die Schriftfamilie beziehe: 'DroidSerif';
Simon Arnold
1
Haben Sie einen Test, der beweist, dass diese Methode tatsächlich funktioniert? Wie würden Sie beweisen, dass der Browser nicht nur das Gewicht oder den Stil vortäuscht, ohne die richtige Schriftartdatei zu lesen?
Rojobuffalo
1
@rojobuffalo hier ist ein Beispielstift, es funktioniert wie erwartet.
Maioman
2
@rojobuffalo macht einen sehr gültigen Punkt. Der Stift unternimmt nichts, um die Gültigkeit der Behauptung zu überprüfen, dass sich dies wie erwartet verhält. Insbesondere habe ich die fett gedruckte Deklaration aus dem CSS-Beispiel entfernt und erneut ausgeführt. Das Aussehen war identisch. Zog es aus dem Cache? Hat der Browser einfach an der angezeigten Gewichtung der regulären Schriftart herumgespielt?
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á
quelle
17
Bitte schreiben Sie eine kleine Erklärung, warum dies das Problem lösen würde. Es kann etwas Einfaches wie ein Satz sein.
Ggderas
3
Gleiche Lösung wie die vorherige. Nur kürzere Notation :)
Mirka Nimsová
2
Wo kann ich über diese Notationen lesen? Sieht es nicht auf MDN
avalanche1
Es scheint nicht zu funktionieren und ich kann keine Ressource finden, aber es scheint eine Wahrheit zu sein.
Dakab