Optimieren von Schriftdeklarationen: Importieren mehrerer Schriftstärken mit einer einzigen @font-face-Abfrage

In Szenarien, in denen eine Schriftfamilie mehrere Variationen von umfasst Wenn Sie Gewicht und Stil festlegen, kann es mühsam werden, jede Variation einzeln mithilfe separater @font-face-Abfragen zu importieren. In diesem Artikel wird die Möglichkeit untersucht, diese Abfragen in einer einzigen Deklaration zu konsolidieren.

Die Herausforderung: Mehrere Schriftstärken importieren

Stellen Sie sich ein Szenario vor, in dem die Klavika-Schriftart in verschiedenen Versionen verfügbar ist Strichstärken und Größen:

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

Die Aufgabe besteht darin, diese Variationen mithilfe einer einzigen @font-face-Abfrage, die den Gewichtungsparameter definiert, in CSS zu importieren. Dadurch entfällt die Notwendigkeit, die Abfrage mehrmals zu kopieren und einzufügen.

Die Lösung: Verwendung der erweiterten @font-face-Syntax

Glücklicherweise bietet @font-face eine erweiterte Syntax, die die Zuweisung unterschiedlicher Stärke- und Stilwerte zu einer einzelnen Schriftfamilie ermöglicht:

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

In diesem Beispiel:

• font-family: 'Klavika' definiert den Namen der Schriftfamilie.
• src: url(..), gefolgt von entsprechende Gewichtung gibt die Quelldateien für die regulären und fetten Varianten an.

Vorteile konsolidierter Schriftartenabfragen

Die Konsolidierung von Schriftartenabfragen bietet mehrere Vorteile:

• Reduzierte Codeduplizierung: Vermeidet sich wiederholende @font-face-Abfragen für jede Gewichtsvariation.
• Verbesserte Lesbarkeit: Hält den CSS-Code organisiert und prägnant .
• Einfachere Wartung: Änderungen an Schriftstärken können an einem einzigen Ort vorgenommen werden.

Zusätzliche Ressourcen

Eine umfassende Übersicht über diese Funktion und ihre Standardverwendung finden Sie im folgenden Artikel: [Erweiterte @font-face-Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/@font -face.

Beispielstift

Sehen Sie sich eine Live-Demonstration dieser Technik im folgenden Beispielstift an: [Mehrere Schriftstärken mit einer einzigen @font-face-Abfrage]( https://codepen.io/anon/pen/abvaqP).