Benutzerhandbuch Abbrechen

CSS-Selektoren

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

Verwenden von Schriftfamiliennamen in Ihrem CSS

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

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

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

Angeben von Ausweichschriften

Wenn der Browser eines Benutzers Webschriften 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 Schriften innerhalb Ihres Projekts auf der Seite mit den Webprojekten finden.

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

h1 {
font-weight: 700;
}
h1 { font-weight: 700; }
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;
}
#post-title { font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif; font-style: normal; font-weight: 700; }
#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 Schriften feststellen.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?