OpenType-Features im Browser

UPDATE: I’ve made an extra page with a clear OpenType feature test.

Vor gut zwei Jahren entwickelte sich ein brauchbarer Standard für Webfonts. Heute ist es möglich, beliebige Schriften auf Internetseiten zu verwenden – auch wenn diese nicht auf dem Rechner des Betrachters installiert sind. Die Schriftdatei wird einfach per CSS verlinkt:

@font-face {
font-family: 'Schriftname';
src: url('schrift.eot'); /* IE9 compatibility mode */
/* für IE6 bis IE8 */
src: url('schrift.eot?#iefix') format('embedded-opentype'),
/* für moderne Browser (FF, Chrome, …) */
url('schrift.woff') format('woff'),
/* für Android */
url('schrift.ttf') format('truetype');
}

Die nächste große Entwicklung in Sachen Webschriften ist wohl, OpenType-Features im Browser nutzen zu können. Das sind zusätzliche Funktionen, die in professionelle Schriften hineinprogrammiert wurden. Klar ist das mehr etwas für Spezialisten und Detailverliebte. Manchmal ist es aber sehr praktisch, Schwungbuchstaben einzusetzen oder für den Fließtext auf Mediävalziffern zurückzugreifen.

Um sehr leicht testen zu können, welche OpenType-Features ein Browser unterstützt (und ob man die Syntax richtig formuliert hat), habe ich Otfeat gestaltet. Die Webschrift enthält jede Menge OpenType-Features zum Ausprobieren. Und so sieht sie aus (wenn dein Browser Webschriften unterstützt):

ab­cdef­ghi­jklm
nopqr­stuvwxyz
AB­CDEF­GHIJ
KLM­NOPQR­STUVWZ

Der hier angezeigte Text ist das kleine und das große Alphabet. Jeder Buchstabe wird als Kästchen angezeigt und steht für ein OpenType-Feature (z. B. a = smcp, Kapitälchen). Je nach Browser sind einige Kästchen vielleicht schon schwarz. Bei mir im Firefox sind das locl, kern, liga, clig und calt (= Lokale Varianten, Kerning, Ligaturen, kontextabhängige Ligaturen und kontextabhängige Alternativen). Diese Features sind mit meinem Browsereinstellungen automatisch aktiviert.

Mit dem CSS-Befehl font-feature-settings kann ich jetzt weitere OpenType-Features einschalten. Der gleiche Text wie oben in der gleichen Schriftart sieht dann so aus (weiße Kästchen mit X sind nicht mit einer Funktion belegt):

ab­cdef­ghi­jklm
nopqr­stuvwxyz
AB­CDEF­GHIJ
KLM­NOPQR­STUVWZ

Der CSS-Code, um OpenType-Features zu aktivieren, wird bislang nur mit Vendor-Prefix in einigen aktuellen Browsern unterstützt. Für Chrome (17+), Firefox (15+), Internet Explorer (10+) und als zukünftiger Standard-Syntax lautet der Code (jeweils für die ersten drei Features):

-webkit-font-feature-settings: "smcp", "c2sc", "c2pc";
-moz-font-feature-settings: "smcp" 1, "c2sc" 1, "c2pc" 1;
-ms-font-feature-settings: "smcp" 1, "c2sc" 1, "c2pc" 1;
font-feature-settings: "smcp", "c2sc", "c2pc";

Wie gut das im IE10 umgesetzt wird, kann ich leider nicht testen. Was man aber im Firefox und Chrome herausfinden kann: Das Feature fina wird nicht korrekt interpretiert. Das Kästchen mit dem Z sollte nur dann schwarz werden, wenn es am Ende eines Wortes steht. Im Folgenden also nur an der dritten Position:

Z XZX XXZ

Noch ein Hinweis: Die Kleinbuchstaben a–z repräsentieren einzelne OpenType-Features, die in beliebiger Reihenfolge abgefragt werden können. Die Großbuchstaben testen Ligaturen und kontextabhängige Varianten. Damit das OpenType-Feature hier aktiv wird, tippt man am einfachsten ein Alphabet. Zumindest müssen aufeinander folgen: AB, CD, EF, GH, IJ, RST und UVW. Das Paar KL muss vor einem M stehen, M und N bedingen einander (in der Reihenfolge) und das O benötigt ein vorangehendes N.

Meine Schrift Otfeat steht unter der Creative Commons Lizenz mit Namensnennung, nicht kommerzieller Nutzung und Weitergabe unter gleichen Bedingungen (CC BY-NC-SA). Sie kann hier in den drei typischen Webfont-Formaten heruntergeladen werden (Rechtsklick, Ziel speichern unter …).

Otfeat als
woff-Datei

Otfeat als
eot-Datei

Otfeat als
ttf-Datei

Bei Fragen, Ideen und Verbesserungsvorschlägen freue ich mich über einen Kommentar.

---
Rubrik(en):  #typografie 

Artikel kommentieren

Kommentare werden überprüft, bevor sie veröffentlicht werden. Alle Angaben sind freiwillig, es gibt keine Pflichtfelder (außer das Kommentarfeld selbst).

 (Pseudonym möglich)
 (wird nicht veröffentlicht)

Formatierungen mit HTML sind möglich, z. B. <em>betont</em>, <strong>hervor­gehoben</strong> oder <code>Quelltext</code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt=Bildbeschreibung">).

← Gebrochene Schriften oder Antiqua?

Vom Einzelblatt zum Buch →