Können Sie mehrere Schriftstärken mit einer einzigen @font-face-Abfrage importieren?

Mehrere Schriftstärken mit einer einzigen @font-face-Abfrage importieren

In CSS wird die @font-face-Regel verwendet, um benutzerdefinierte Schriftarten in eine Webseite zu importieren. Das Importieren von Schriftarten mit mehreren Stärken kann jedoch mehrere Abfragen erfordern. In diesem Artikel wird die Möglichkeit untersucht, mehrere Schriftstärken mit einer einzigen Abfrage zu importieren.

Problem

Betrachten Sie die Schriftart Klavika, die in 8 verschiedenen Formen und Größen erhältlich ist:

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

Das Ziel besteht darin, diese Schriftarten mit einer einzigen @font-face-Abfrage in CSS zu importieren und so die Gewichtung in der Abfrage zu definieren selbst.

Lösung

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

Um dies zu erreichen, kann eine spezielle Variante von @font-face verwendet werden:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

Dieser Ansatz verbindet verschiedene Stile und Schriftstärken mit verschiedenen Schriftarten, die denselben Schriftfamiliennamen verwenden.

Verwendung

Jetzt können Sie die Schriftstärke angeben oder Schriftstil für jedes Element, ohne die Schriftfamilie anzugeben oder bestehende Einstellungen zu überschreiben:

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

Fazit

Mit dieser Technik ist es möglich, mehrere Schriftstärken mit einem einzigen @font zu importieren -Face-Abfrage in CSS, was den Prozess vereinfacht und die Codeeffizienz verbessert.

Das obige ist der detaillierte Inhalt vonKönnen Sie mehrere Schriftstärken mit einer einzigen @font-face-Abfrage importieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!