Benutzerhandbuch Abbrechen

Verwenden von OpenType-Merkmalen

Suchen

Zuletzt aktualisiert am 23. Juni 2023

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“.

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

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

.class {
  font-variant-caps: small-caps;
  font-feature-settings: „smcp&quot;; /* 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&quot;;
}

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

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.