Schriftarten

Als konsistentes Feature wurde die typografische Steuerung in jeder neuen Version von CSS verbessert. Das Fehlen eines interoperablen Webschriftartformats kann jedoch auch frustrierend sein.In Windows Internet Explorer 9 wurde erweiterte Unterstützung für CSS-Schriftarten eingeführt, um die Konformität mit der Spezifikation "CSS Fonts Module Level 3" zu gewährleisten. Zudem wurde die Unterstützung für WOFF (Web Open Font Format)- und vollwertige TrueType-Schriftarten eingeführt. In Internet Explorer 10 wurde die Unterstützung für CSS3-Schriftarten erweitert und umfasst jetzt die systemnahe Steuerung von OpenType-Layoutfeatures.

Schriftarteigenschaften

Die font-weight-Eigenschaft wurde ab Internet Explorer 9 aktualisiert und berechnet jetzt Schriftbreite gemäß der Angabe in "CSS3-Schriftarten".

Die font-size-Eigenschaft wurde so aktualisiert, dass der Skalierungsfaktor aller Schlüsselwörter der Definition in "CSS Fonts Module Level 3" entspricht. Außerdem sind Schlüsselwörter und HTML-Überschriftgrößen jetzt gemäß der Angabe zugeordnet.

Die font-stretch-Eigenschaft wurde in Internet Explorer 9 eingeführt und wählt aus einer Schriftfamilie eine normale, schmale oder gesperrte Schriftlaufweite aus. Diese Eigenschaft ist auch als @font-face-Regelbeschreibung verfügbar.

Die @font-face-Regel

Die @font-face-Regel ermöglicht die Schriftartverknüpfung. Das bedeutet, dass ein Stylesheet auf eine bestimmte Schriftartdatei verweisen kann, die mit dem Browser heruntergeladen und verwendet wird. Nehmen wir folgendes Markup.


@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf)
      format("embedded-opentype");
}
p {
   font-family: MyFont, serif;
}


In diesem Beispiel weist die @font-face-Regel den Browser an, die in der src-Beschreibung angegebene URL zu öffnen, um die Schriftartdatei mit der angegebenen Schriftart herunterzuladen. In Windows Internet Explorer 8 und früheren Versionen wurde die src-Beschreibung fälschlicherweise ignoriert, wenn sie eine optionale format-Zeichenfolge wie die im vorhergehenden Beispiel enthielt. In Internet Explorer 9 wird die src-Beschreibung erwartungsgemäß analysiert.

Internet Explorer 9 unterstützt nun auch die unicode-range-Beschreibung; dies ermöglicht Ihnen die Angabe des Bereichs der von einer bestimmten Schriftart unterstützten Unicode-Zeichen. Das folgende Codebeispiel gibt z. B. den Bereich grundlegender ASCII-Zeichen an.


@font-face {
    font-family: MyFont;
    src: url(http://mysite/fonts/MyFont.ttf);
    unicode-range: U+0-7F;
}

Webschriftartformate

Microsoft hat Internet Explorer 9 für eine optimale Auswahl an Webschriftarten entwickelt. Zu diesem Zweck haben wir Folgendes vorgenommen:

  • Sicherstellen der Abwärtskompatibilität mit fortgesetzter Unterstützung von EOT (Embedded OpenType)
  • Hinzufügen von Unterstützung für WOFF (Web Open Font Format), womit sfnt-basierte Schriftartdateien (TrueType-, OpenType- und Open Font Format-Schriftarten) umgepackt werden, indem jede Tabelle einzeln mithilfe eines ZIP-Komprimierungsformats komprimiert werden
  • Hinzufügen von Unterstützung für installierbare (ohne Festlegung von Berechtigungsbits) unformatierte TrueType-Schriftarten

Typografische Features

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.

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, "Font feature properties", gute 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.

API-Referenz

font-feature-settings
Fonts

Beispiele und Lernprogramme

Beispiel für die OpenType-Features
Verbessern der Schriftgestaltung Ihrer Website mit CSS3
Informationen zur Schriftarteinbettung

Demos für die Internet Explorer-Testversion

Nutzen aller Schriftfunktionen
Mehr Webschriftarten
Webschriftarten

IEBlog-Beiträge

Teilpixelrendering und das CSS-Objektmodell
CSS: Nutzen aller Schriftfunktionen
Teilpixel-Schriftarten in IE9
Die CSS-Ecke: Bessere Webtypografie – besseres Design

Spezifikation

CSS3-Modul (Level 3) für Schriftarten

Verwandte Themen

Brillante Websites mit @font-face

 

 

Anzeigen:
© 2014 Microsoft