Benutzerhandbuch Abbrechen

Verwenden von OpenType-Merkmalen

  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

OpenType-Merkmale sind wie Geheimfächer in Schriften. Entsperren Sie sie und Sie finden Mittel und Wege, um das Verhalten von Schriften auf subtile oder dramatische Weise zu ändern. Nicht alle OpenType-Merkmale eignen sich für die ständige Anwendung, aber einige Merkmale führen zu einer wirklich herausragenden Typografie.

Damit Sie die OpenType-Merkmale in Ihrem Projekt verwenden können, müssen Sie sie in das Web-Projekt einbeziehen und Ihren Text dann mit OpenType-Merkmalen mithilfe von CSS gestalten. Beispiele zu jedem Merkmal mit Code, den Sie in Ihr CSS kopieren und einfügen können, finden Sie in unserem Leitfaden zur Syntax.

Einbeziehen von OpenType-Merkmalen in Ihr Projekt

Um die OpenType-Funktionen in ein Web-Projekt einzubeziehen, besuchen Sie die Seite mit den Web-Projekten und klicken Sie auf den Link zum Bearbeiten des Projekts. Aktivieren Sie im Abschnitt zum Zeichensatz das Feld „OpenType-Funktionen“. 

Bild

Ist das Feld aktiviert, wird Ihnen eine Liste der verfügbaren Merkmale für diese spezifische Web-Schrift-Familie angezeigt, wie zum Beispiel Ligaturen, Sonderzeichen oder Kapitälchen. 

Diese Liste weist OpenType-Merkmale auf, die in allen Stärken und Stilen der Schriftfamilie verfügbar sind. Wenn eine Funktion nur für bestimmte Stärken und Stile zur Verfügung steht, ist sie nicht in der Liste enthalten.

Überprüfen der Browser-Unterstützung für die von Ihnen verwendeten Merkmale

Eine schlechte Browser-Unterstützung für „font-variant“ und „font-feature-settings“ bedeutet, dass OpenType-Merkmale eventuell nicht in allen Kontexten, die Ihnen wichtig sind, korrekt angezeigt werden.

Die Unterstützung ist verblüffend nuanciert. Bei neueren Browser-Versionen, die eine Unterstützung mit Einschränkungen versprechen, und älteren Browsern, die keine OpenType-Merkmale unterstützen, kann es zu fehlerhaften Anzeigen kommen. In der Standardeinstellung aktiviert Chrome keine Merkmale, die normalerweise aktiviert sein sollten (wie allgemeine Ligaturen und kontextbedingte Alternativen). Safari unter macOS und iOS ignoriert alle angegebenen Werte für „font-feature-settings“ und aktiviert stattdessen standardmäßig einige wenige Merkmale – und diese Standardoptionen können nicht geändert werden. Einige Versionen von Firefox (Version 15 und älter) haben Probleme, wenn mehrere stilistische Sets aktiviert sind. Das Anwenden von OpenType-Merkmalen in Chrome 32 und älteren Versionen führt dazu, dass Web-Schriften nicht korrekt angezeigt werden.

-moz-font-feature-settings: „smcp“; -webkit-font-feature-settings: „smcp“; font-feature-settings: „smcp“;

Die Unterstützung durch aktuelle Browser hängt stark von den Hersteller-Präfixen ab. Im Hilfedokument Syntax für OpenType-Merkmale in CSS finden Sie Codes mit zahlreichen Hersteller-Präfix-Eigenschaften, die wie das oben stehende Beispiel aussehen.

Stylen des Textes mit OpenType-Merkmalen mithilfe von CSS

Die CSS-Syntax zum Aktivieren von OpenType-Merkmalen ist noch in der Entwicklung. Alles, was Sie wissen müssen, ist, dass es sowohl High-Level- als auch Low-Level-Eigenschaften gibt – und dass die Vererbung recht heikel ist.

Die Low-Level-CSS-Eigenschaft „font-feature-settings“ wird über Hersteller-Präfixe teilweise in Browsern unterstützt, aber die Verwendung ist aus zwei Gründen verhältnismäßig umständlich. Erstens beruht sie auf vierstelligen OpenType-Merkmal-Tags, die sich nur schwer merken lassen. Zweitens werden alle Merkmal-Tags in einer einzigen Eigenschaft angegeben und das kann haarig werden. Weitere Informationen finden Sie unter Syntax für spezifische OpenType-Merkmale und Syntax zur Verwendung mehrerer OpenType-Merkmale.

Die High-Level-CSS-Eigenschaft „font-variant“ und ihre Untereigenschaften sind fantastisch, weil sie Werte der natürlichen Sprache wie Kapitälchen und diagonale Brüche unterstützen. Das W3C möchte, dass wir diese Eigenschaften wann immer möglich verwenden, aber es gibt keine Unterstützung seitens der Browser. Dennoch halten wir es für eine gute Idee, sich mit der Syntax vertraut zu machen.

.class {
  font-variant-caps: small-caps;
  font-feature-settings: „smcp";
}

Wir werden also sowohl font-variant als auch font-feature-settings verwenden und berücksichtigen dabei ihre Funktionsweise. Wir verwenden zunächst die einfach zu lesende „font-variant“ in unserem CSS, wie im oben aufgeführten Code.

Vererbung

Da „font-feature-setting“ eine Low-Level-Eigenschaft ist, die „für bestimmte Fälle vorgesehen ist, in denen sie die einzige Möglichkeit darstellt, auf eine bestimmte selten verwendete Schrifteigenschaft zuzugreifen“, überschreibt sie „font-variant“ unabhängig von der Quellenreihenfolge. Vorsicht: Sie überschreibt sich auch selbst:

body {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: „onum";
}

.class {
  font-variant-caps: small-caps;
  font-feature-settings: „smcp"; /* disables onum from body declaration */
}

Alle geerbten „font-feature“-Werte werden außer Kraft gesetzt, wenn die Eigenschaft erneut angewendet wird. Im obigen Beispiel sind für die Elemente mit einer Klasse sowohl Kapitälchen (smcp) als auch Mediävalzahlen (onum) aktiviert, der Wert „onum“ muss jedoch erneut aufgenommen werden. So können wir die Deklaration wie folgt umschreiben:

.class {
  font-variant-caps: small-caps;
  font-feature-settings: „onum“, „smcp";
}

Indizierte font-feature-settings-Werte

Einige „font-feature-settings“-Werte sind ein wenig komplexer. In den bisherigen Beispielen war jeder Wert eine Zeichenfolge (oder ein durch Kommata getrennter Zeichenkettensatz). Das Vorhandensein oder Fehlen von Merkmal-Tags wie „onum“ und „smcp“ ist wie eine binäre Auswahl – die Eigenschaften sind entweder ein- oder ausgeschaltet.

Das ist sinnvoll. Aber was ist beispielsweise, wenn eine Schrift zwei verschiedene Schwungbuchstaben-Versionen des Großbuchstabens „A“ enthält? In diesem Fall möchten wir nicht einfach Schwungbuchstaben aktivieren – wir möchten Zierbuchstaben aktivieren und einen bestimmten Schwungbuchstaben auswählen. In diesem Fall können wir einen numerischen Index hinter der Zeichenfolge zum Wert hinzufügen:

font-feature-settings: „swsh“ 2;

Vielleicht fragen Sie sich, welche Zahl Sie hier verwenden sollen? Wie viele verschiedene Schwungbuchstaben sind in einer Schrift enthalten? Nun, das hängt von der Schrift ab. Mit der Zahl „0“ deaktivieren Sie das Schwungbuchstaben-Merkmal. Das Gleiche gilt für andere Merkmale, die numerische Indizes verwenden, z. B. stilistische Alternativen und stilistische Sets.

Verwenden mehrerer OpenType-Merkmale

Die Eigenschaft „font-variant“ ist eine CSS-Abkürzung für alle „font-variant“-Untereigenschaften. Wir können etwas wie dieses Merkmal verwenden, um allgemeine Ligaturen und Mediävalzahlen zu aktivieren:

.class {
  font-variant: common-ligatures, oldstyle-nums;
}

Ähnlich können mehrere Merkmale mithilfe von „font-feature-settings“ mit einer durch Kommata getrennten Werteliste aktiviert werden:

.class {
  font-feature-settings: „liga“, „onum";
}

In beiden Fällen werden geerbte Werte vollständig überschrieben und die Browser-Unterstützung kann variieren. Beachten Sie, dass „font-variant“-Werte manchmal entwickelt wurden, um mehrere Funktionen gleichzeitig zu aktivieren (siehe Kapitälchen von Großbuchstaben).

Ressourcen

Wenn Sie bereit sind, das Styling mit CSS zu beginnen, legen Sie ein Lesezeichen für unser Syntax-Glossar der häufig verwendeten OpenType-Merkmale an.

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?