Benutzerhandbuch Abbrechen

CSS-Selektoren

  1. Adobe Fonts-Benutzerhandbuch
  2. Einführung
    1. System- und Abonnementanforderungen
    2. Browser- und Betriebssystemunterstützung
    3. Hinzufügen von Schriften auf dem Computer
    4. Hinzufügen von Schriften zu einer Website
    5. Hinzufügen von Schriften zu CC Mobile
  3. Schriftenlizenzierung
    1. Schriftenlizenzierung
    2. Verwalten Ihres Kontos
    3. Lizenzierung für Kunden von Creative Cloud für Unternehmen
    4. Hinzufügen von Schriftenlizenzen zu Ihrem Konto
    5. Entfernen von Schriften aus der Abonnementbibliothek
    6. Adobe Fonts ist für in China registrierte Adobe IDs nicht verfügbar
    7. Warum sind diese Schriften nicht in meinem Creative Cloud-Abonnement enthalten?
    8. Entfernen von Morisawa-Schriften ab September 2021
  4. Abrufen und Verwenden von Schriften
    1. Verwenden von Adobe Fonts in Creative Cloud-Anwendungen
    2. Verwalten Ihrer Schriften
    3. Fehlende Schriften in Desktop-Anwendungen auflösen
    4. Verwenden von Schriften in InDesign
    5. Schriften und Typografie
    6. Verwenden von Webschriften in HTML5 Canvas-Dokumenten
    7. Verwenden von Schriften in InCopy
    8. Verwenden von Schriften in Adobe Muse
    9. Verwenden von Webschriften in Muse
    10. Verpacken von Schriftendateien
    11. Leitfaden zur Fehlerbehebung: Hinzufügen von Schriften
    12. Hinzugefügte Schriften werden im Schriftmenü nicht angezeigt
    13. „Eine oder mehrere Schriften können nicht hinzugefügt werden“ oder „Eine Schrift mit diesem Namen ist bereits installiert“
    14. Was geschieht, wenn eine von mir verwendete Schrift vom Schriftenhersteller aktualisiert wird?
  5. Web-Design und Entwicklung
    1. Hinzufügen von Schriften zu einer Website
    2. Fehlerbehebungshandbuch: Hinzufügen von Schriften zu einer Website
    3. Verwenden von Webschriften in HTML-E-Mails oder -Newslettern
    4. Verwenden von Webschriften mit Accelerated Mobile Pages (AMP)
    5. CSS-Selektoren
    6. Anpassen der Verarbeitung von Webschriften mit Einstellungen für „font-display“
    7. Einbettungscodes
    8. Dynamisches teilweises Laden und Bereitstellen von Webschriften
    9. Schriftereignisse
    10. Warum stammen meine Webschriften von use.typekit.net?
    11. Website kann keine Verbindung mit use.typekit.net herstellen
    12. Verwenden von Webschriften mit CodePen
    13. Browser- und Betriebssystemunterstützung
    14. Domänen
    15. Verwenden von Webschriften bei lokaler Entwicklung
    16. Content-Sicherheitsrichtlinie
    17. Drucken von Webschriften
  6. Sprachunterstützung und OpenType-Merkmale
    1. Sprachunterstützung und teilweises Laden von Sprachen
    2. Verwenden von OpenType-Merkmalen
    3. Syntax für OpenType-Merkmale in CSS
  7. Schrifttechnologie
    1. OpenType-SVG-Farbschriften
    2. Ten Mincho: Wichtige Informationen zur Aktualisierung von Version 1.000

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

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

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 Schriften feststellen.

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?