201021Mai

Webentwicklung: Unterschiede bei @font-face

Die Woche war geprägt von Entwicklungen und Diensten für CSS3-Schriftarten, die per "@font-face" eingebettet werden. Neben Fonts Live wurde die Google Font API gestartet. Auch ohne externe Dienstleister können Schriftarten in CSS3 verwendet werden.
Unabhängig von der Verwendung und der Auswahl an verfügbaren CSS3-Fonts sollte man sich einmal die finale Darstellung im Webbrowser ansehen — bei Typophile wurde eine detaillierte Grafik veröffentlicht, in der die Funktionsweise von "@font-face" und dessen Darstellungsunterschiede in Browsern gezeigt wird.

Typophile - @font-face rendering

Wie in der Grafik zu erkennen ist, gibt es durchaus sichtbare Differenzen unter den verbreiteten Webbrowsern. Während Anti-Aliasing bei Internet Explorer 6 gänzlich fehlt, erscheinen CSS3-Fonts unter Mac OS X bzw. Safari etwas dicker. Man sollte sich also dynamische Schriftarten (vor einem eventuellen Kauf) auf jeden Fall in mehreren Browsern ansehen, wenn ein Projekt für eine breite Zielgruppe ausgelegt ist. In der Grafik findet sich übrigens auch eine Vorschau auf das Font-Rendering von Internet Explorer 9 und Firefox 3.7.
Natürlich befinden sich CSS3 und HTML5 noch in der Entwicklung und es wird sicherlich noch eine Weile vergehen, bis moderne Browser den Markt beherrschen. Dennoch sollten sich Webentwickler schon jetzt mit der Technik der Zukunft auseinandersetzen und über Details informiert sein.

RSS-Feed abonnieren

Kommentare

Don schrieb am 25.05.2010 #1

..wirklich wahres Subpixel-Rendering(ohne Snap zum Pixlegrid) wäre mal was, das man das Kerning in Subpixel-Bereich bestimmen könnte.
Das etwas "dickliche" beim Mac ist übrigens völlig richtig, da sich bisher nur dadurch der Character der Schrift (vom Original aus dem Druck) bewahren lässt. Das Windows System stell Schriften leider ein bisschen falsch dar bzw. die Schrift ist zu Dünn und "künstlich" Geschärft (Cleartype), was leider zu ungunsten des Characters fällt.
..hab ich zumindest mal gelesen und fand es passend :)