CSS-Selektoren geben dem Browser vor, wo die von Ihnen verwendeten Webschriftarten angewendet werden können und wie Stärke und Stil der für den Text zu verwendenden Schriftart sein sollen.

Verwenden von Schriftfamiliennamen in Ihrem CSS

Auf der Seite zu den Webprojekten werden der Name der CSS-Schriftartenfamile, die numerische Stärke und der Schriftartenstil zu jeder Schriftart innerhalb des Projekts aufgeführt. Klicken Sie auf den Link „Projekt bearbeiten“, um die CSS-Details zu jedem Projekt anzuzeigen.

Verwenden des Schriftfamiliennamens im CSS

Sobald Sie den Einbettungscode in Ihr Dokument eingefügt haben, verwenden Sie diese Schriftfamiliennamen im CSS, um die Schriftarten auf den Text anzuwenden. Beispiel:

h1 {
  font-family: "brandon-grotesque", sans-serif;
}

Angeben von Ausweichschriftarten

Wenn der Browser eines Benutzers Webschriftarten nicht unterstützt oder diese aus beliebigen Gründen nicht geladen werden, werden stattdessen die Ausweichschriften aus dem CSS-Stapel verwendet.

Der Schriftenstapel sollte mindestens eine Ausweichschrift enthalten, die einheitlich über Plattformen zur Verfügung steht (wie Georgia oder Arial), gefolgt von einer generischen Schriftfamilien-Bezeichnung (wie Serif oder Sans Serif). Wenn der Browser die erste Schrift nicht finden kann, versucht er es mit der zweiten Schrift und so weiter.

Verwenden mehrerer Schriftstärken und -stile

Sie können andere Schriftstärken als normal und fett mithilfe von numerischen Werten für „font-weight“ in CSS angeben. Die numerischen Werte entsprechen meistens diesen Stärken:

  • 100 = dünn
  • 200 = extra-leicht
  • 300 = leicht
  • 400 = normal, Buch
  • 500 = mittel
  • 600 = halbfett
  • 700 = fett
  • 800 = schwer
  • 900 = schwarz

Sie können die numerischen Werte zu allen Schriftarten innerhalb Ihres Projekts auf der Seite mit den Webprojekten finden.

Verwenden von Stärken und Stilen im CSS

Verwenden Sie beispielsweise dieses CSS, um die Stärke 700 einer Schriftart auf das h1-Element anzuwenden:

h1 {
  font-weight: 700;
}

Verwenden von variationsspezifischen Namen in Internet Explorer 8

Internet Explorer 8 lädt maximal vier Schriftstärken pro Familie. Das Verwenden von zwei eng miteinander verwandten Schriftstärken (z. B. 600 und 700) kann dazu führen, dass nur eine Schriftstärke korrekt geladen wird. Adobe Fonts stellt variationsspezifische Schriftfamiliennamen für diese Browserversionen bereit, um mit diesen Programmfehlern umzugehen.

Der variationsspezifische Name sollte am Anfang eines font-family-Stapels hinzugefügt werden, und zwar vor dem Hauptfamiliennamen:

#post-title {
  font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
  font-style: normal;
  font-weight: 700;
}

Die Namen bestehen aus dem normalen „font-family“-Namen, gefolgt von einem Bindestrich, gefolgt von einer font variation description (oder FVD). Beispielsweise lautet der variationsspezifische Name für brandon-grotesque, der nur die Schriftstärke 700 enthält, brandon-grotesque-n7.

Der variationsspezifische Name ist in Browsern nicht definiert, die diese Probleme nicht aufweisen, daher verwenden sie den vollständigen Familiennamen, der als zweites im Stapel folgt.

Die meisten Benutzer verwenden diese zusätzlichen Schriftfamiliennamen nicht. Sie müssen sie nur hinzufügen, wenn sie vor allem in Internet Explorer 8 Probleme bei der korrekten Anzeige dieser Schriftarten feststellen.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie