Exportieren (0) Drucken
Alle erweitern

Schriftarten

Die Webtypografie hat einen großen Schritt nach vorn gemacht und bietet jetzt Unterstützung für die Steuerung von OpenType-Layoutfeatures auf unterster Ebene in Internet Explorer 10 und Windows Store-Apps mit JavaScript. Die font-feature-settings-Eigenschaft, definiert in Abschnitt 6.12 der W3C-Spezifikation (World Wide Web Consortium) CSS Fonts Module Level 3, ermöglicht das Angeben der Glyphenersetzung und -positionierung in Schriftarten, die Microsoft OpenType-Layoutfunktionen enthalten.

Dieses Thema enthält die folgenden Abschnitte:

Typografische Features

Die OpenType-Spezifikation definiert viele erweiterte typografische Features, die von Schriftartendesignern implementiert werden können. Sie können z. B. eine vertikale Positionierung für eine Schriftart definieren, Glyphenformen durch Ligaturen, Kontextalternativen, stylistische Alternativen oder Schwungbuchstaben ersetzen, einen Satz Kleinbuchstaben einfügen und vieles mehr.

Jede definierte Funktion hat ein entsprechendes Funktionstag, das ihre Funktion und Auswirkungen kennzeichnet. Schriftartenentwickler können zudem ihre eigenen Funktionen definieren. Durch Prüfung des Tags einer Funktion ermitteln Internet Explorer 10 und Windows Store-Apps mit JavaScript, was die Funktion bewirkt und ob sie implementiert wird. In der folgenden Tabelle sind einige der gängigsten Featuretags und ihre Definitionen aufgeführt. Die vollständige Liste der OpenType-Layoutfeatures finden Sie im Tagverzeichnis für OpenType-Layoutfeatures.

TagBeschreibung

kern

Kerning

smcp

Kapitälchen

liga

Standardligaturen

dlig

Bedingte Ligaturen

ss01, ss02, ss03 ... ss20

Stil-Sets (schriftartspezifisch)

swsh

Schwungbuchstaben

tnum

Tabellenziffern

lnum

Versalziffern

onum

Mediävalziffern

 

Hinweis  Wenn Sie mit den in dieser Tabelle aufgeführten Schriftartfeatures nicht vertraut sind, finden Sie in der Spezifikation „CSS Fonts Module Level 3“ in Abschnitt 6 zu Eigenschaften von Schriftartfeatures hilfreiche Erläuterungen und visuelle Beispiele für die einzelnen Schriftartfeatures. Beachten Sie, dass die genannten Eigenschaften zwar den OpenType-Layoutfeatures entsprechen, die in Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützt werden, die Eigenschaften selbst (font-kerning, font-variant-* usw.) jedoch nicht unterstützt werden.

Implementieren von OpenType-Layoutfeatures

Um OpenType-Layoutfeatures zu verwenden, müssen Sie zunächst eine Schriftart verwenden, die mindestens ein Feature enthält. Weitere Informationen zum Unterstützen des erweiterten Schriftartdesigns, einschließlich Schriftverknüpfung und unterstützten Schriftartformaten, finden Sie unter Verbessern der Schriftgestaltung Ihrer Website mit CSS3.

Nachdem Sie die Schriftartverknüpfung mit einer Schriftart eingerichtet haben, die OpenType-Layoutfunktionen bietet, implementieren Sie diese Funktionen mithilfe der font-feature-settings-Eigenschaft . In Internet Explorer 10 und Windows Store-Apps mit JavaScript gilt die folgende Syntax für diese Eigenschaft, wobei "feat" einem OpenType-Layoutfunktionstag entspricht:

font-feature-settings: "feat" 1;

Der Wert "1" hinter dem Featuretag ist ein boolescher Umschaltwert. Wenn kein Wert angegeben ist, wird die Deklaration so behandelt, als würde auf das Tag der Wert "1" folgen. Mit dem Wert "0" wird das Tag deaktiviert.

Wenn Sie beispielsweise bedingte Ligaturen für eine Schriftart aktivieren möchten, in der diese enthalten sind, wenden Sie die folgende Deklaration auf die entsprechende Auswahl an:


font-feature-settings: "dlig" 1;

Um mehrere OpenType-Schriftartfeatures für eine Textauswahl zu implementieren, listen Sie einfach die einzelnen Tags mit dem jeweiligen Umschaltwert auf und trennen die Tags durch Kommas.


font-feature-settings: "dlig" 1, "ss02" 1, "case" 1;

Zum Zeitpunkt der Erstellung dieses Artikels ist Mozilla Firefox der einzige andere Browser, der OpenType-Layoutfeatures unterstützt. Die Syntax von Mozilla Firefox weicht geringfügig von der ab, die in Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützt wird. Weitere Informationen finden Sie in der CSS-Referenz für Mozilla-Erweiterungen. Beachten Sie, dass sich bei der Entwicklung von CSS Fonts Module Level 3 die Syntax noch ändern kann.

Hinweis  Die Version dieser Eigenschaft mit Herstellerpräfix (-ms-font-feature-settings) ist veraltet. Um die Kompatibilität auch in Zukunft zu gewährleisten, sollten Apps, bei denen diese Eigenschaft mit Herstellerpräfix verwendet wird, aktualisiert werden.

Verwandte Themen

CSS
Internet Explorer 10: Handbuch für Entwickler

 

 

Anzeigen:
© 2015 Microsoft