Unscharfe Fonts im Browser: Die Probleme von DirectWrite

Im gezeigten Beispiel der vorigen Seite ist die unterschiedliche Fontmetrik nicht dramatisch. In anderen Fällen kann es jedoch dazu führen, dass ein Text mit GDI fünf Zeilen benötigt. Wird er mit DirectWrite gerendert, kommt er eventuell mit vier Zeilen aus, was dazu führt, dass die folgenden HTML-Elemente nach oben rutschen. Dann sieht komplette Website „schief“ aus. Das zeigen die Bilder 3 und 4.

Bild 3: Wenn man den Vorspanntext aus Bild 1 etwas kürzt und neben zwei andere Boxen in gleichem Layout stellt, dann ergibt sich bei GDI-Rendering diese Darstellung.
Bild 3: Wenn man den Vorspanntext aus Bild 1 etwas kürzt und neben zwei andere Boxen in gleichem Layout stellt, dann ergibt sich bei GDI-Rendering diese Darstellung.

Bild 4: Beim Rendern mit DirectWrite entfällt in der linken Box die fünfte Zeile und das Gesamtlayout sieht nicht mehr gut aus.
Bild 4: Beim Rendern mit DirectWrite entfällt in der linken Box die fünfte Zeile und das Gesamtlayout sieht nicht mehr gut aus.

Das Hochrutschen der nachfolgenden Zeilen lässt sich natürlich mit einem aufwändigeren Design der Website verhindern, etwa durch bessere Stylesheets mit Positionsangaben oder durch eine Tabelle mit festen Höhen. Viele Webdesigner verlassen sich jedoch auf die Fontmetrik. Hinzu kommt, dass trotzdem eine Leerzeile bleibt.

Microsofts Sicht der Dinge

Daniel Melanchton, Evangelist bei Microsoft, erläutert im Gespräch mit ZDNet, warum das Fontrendering mit DirectWrite zu einer anderen Metrik führt als beim Rendering mit GDI. Man habe generell drei Dinge verbessert, nämlich Kerning, Hinting und ClearType. Eine neue Metrik sei dabei unvermeidlich, denn DirectWrite rendere korrekt, während GDI die Breite einzelner Zeichen und des Gesamttextes nicht richtig einhalte.

Genauer gesagt habe man insbesondere beim Kerning und Hinting mit GDI etwas „geschummelt“ und die Informationen, die in den Fontdateien steckt, nicht ganz exakt ausgewertet, was bei DirectWrite nunmehr der Fall sei.

Themenseiten: Betriebssystem, Browser, Business-Software, Chrome, Firefox, Internet Explorer, Microsoft, Software, Windows

Fanden Sie diesen Artikel nützlich?
Content Loading ...
Whitepaper

Artikel empfehlen:

Neueste Kommentare 

6 Kommentare zu Unscharfe Fonts im Browser: Die Probleme von DirectWrite

Kommentar hinzufügen
  • Am 7. Februar 2011 um 17:57 von Miko

    Update
    Microsoft hat mittlerweile ein Update herausgebracht (welches AFAIK Bestandteil von Windows 7 SP1 ist), welches die Schärfe von hellem Text auf dunklen Grund verbessert, das sieht dann also nicht mehr so aus wie auf dem Screenshot im Teil 1.

    Die Nutzer mit 19-Zoll-Bildschirmen mit 1280×1024-Auflösung tun mir Leid, da lob ich mir meine 137 PPI.

    • Am 15. März 2011 um 18:14 von Roger

      AW: Update
      Ich habe das Problem auch bei Chrome. Jetzt hab ich das Service Pack 1 installiert und es hat kaum etwas geholfen. Solange die Schriftdarstellung nicht wie gewohnt ist, werde ich die Hardwarebeschleunigung (leider) deaktivieren müssen, die Darstellung ist schlicht inakzeptabel, hoffentlich wird dieses Problem bald gelöst, es sind ja sehr viele Nutzer davon betroffen.

      • Am 16. März 2011 um 18:34 von Miko

        AW: AW: Update
        Chrome verwendet GDI, also das was IE8 und davor verwendete. Der einzige andere Browser der auch DirectWrite unterstützt ist Firefox 4 mit aktivierter Hardwarebeschleunigung oder gesetztem gfx.font_rendering.directwrite.enabled Flag.

  • Am 16. März 2011 um 17:15 von JP

    In einigen Fällen hat es aber auch Vorteile
    Ich habe das ganze noch nie als unscharf empfunden. Vielleicht bin ich auch nur die Darstellung von OS X gewohnt. Dort war das schon immer so. GDI-Glättung sieht von den Standardschriften abgesehen oft sehr grausam aus. IE9 – eigentlich bereits IE4 (das Format war aber sehr exotisch) – beherrscht Webfonts, die nachgeladen werden. Ohne vernünftige Glättung sind viele Seiten bei denen der Gestalter mal etwas Abwechslung zu Arial, Times New Roman, Verdana, Tahoma und Konsorten liefern recht schlecht lesbar. Das alte ClearType (ohne Direct2D/Write) wurde für Screenreader unter WindowsCE entwickelt und setzt auf Hinting welches speziell vorbereitete Fonts so manipuliert, dass der Eindruck entsteht sie wären schärfer. Ohne Hints wird die Glättung gegenüber GDI verbessert aber der volle Effekt ist nicht da. Außer bei einer Hand voll Windows-Bildschirmschriftarten kommt dieser Vorteil nicht zu tragen. Die Veränderung hilft natürlich in anderen Anwendungen (z. B. DTP) bei der Vorabbeurteilung eines Layout (es sei denn es ist ein E-Book) nicht wirklich weiter. In meinen Augen ist das Ganze Geschmackssache. Ich persönlich fand die GDI-Schriftglättung (war nie für LCDs gedacht) in Windows XP furchtbar pixelig (ClearType (klassische Version) musste erst aktiviert werden, danach ging es besser).

  • Am 29. Juni 2011 um 7:29 von Daniel Melanchthon [MSFT]

    Fix für unscharfe Schriftdarstellung in Internet Explorer 9 jetzt verfügbar
    Viele Anwender haben in der Vergangenheit die Darstellung kleiner Schriftgrößen im Internet Explorer 9 besonders bei niedrigen Bildschirmauflösungen kritisiert: Subpixel-Positionierung mit DirectWrite (IE9, Firefox) vs. pixelgenaue Positionierung über GDI (IE8, Chrome)

    Während die einen Cleartype und Subpixel-Positionierung besser lesbar finden, präferieren andere die eckige Darstellung ohne Cleartype & Co und kritisieren “blurry fonts”.

    Am 27.06.2011 haben wir nun eine Aktualisierung der Schriftarten Arial, Verdana und Tahoma für Windows Vista, Windows Server 2008, Windows 7 und Windows Server 2008 R2 an, um diesen Konflikt zu entschärfen: http://bit.ly/jll76a

    Viele Grüße,
    Daniel Melanchthon
    Microsoft Deutschland GmbH

  • Am 27. November 2016 um 20:32 von locop chun

    diese schrift im kommentarfeld
    “ Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *
    Kommentar “
    ist kaum noch zu lesen !

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *