Fonts sollen möglichst gleich aussehen auf allen Browsern

[CubeMaster]

Hi,

ich bin ja nun schon lange im Geschäft, aber stoße immer mal wieder auf totale Undinger. Eines davon ist mir erst gestern deutlich aufgefallen, nämlich, dass der IE 9 die body font verdana mit 11px absolut verwaschen darstellt auf meinen Webseiten. (em oder px-Angabe spielt da keine Rolle)

JA, ich habe das Problem gegoogelt und auch eine Lösung gefunden, wie man die Schrift klar und deutlich darstellen kann

NUR, weiß ich auch, wie blöd (entschuldigung) manche User sein können, denen ist das egel ob sie augenkrebs bekommen. Dennoch würde ich gerne dafür sorgen, dass die Schrift die ich auswähle auch in schönsten und neuesten Internet Explodierer 9 klar und deutlich lesbar ist OHNE dass ich vom User verlangen muss, dass er was an der Software anderes einstellt (siehe Dokumentenmodus, GPU-Beschleunigung etc.)

Zwar teste ich vorher immer eine Website in den anderen Browsern, aber hauptsächlich auf den alten, weil ich davon ausgehe, dass die neuen alles richtig darstellen. Hätte ich eigentlich besser wissen müssen

Daher meine Frage:
Wie macht ihr das? Kann man die CSS-Datei irgendwie so aufpolieren, dass auch beim IE 9 ein klares Schriftbild dargestellt wird?

P.S.: IE ist sche***

[Melegrian]

11px ist für Verdana eine etwas unglückliche Wahl, auch unterdurchschnittlich klein, wie ich meine. Probiere es einmal mit 13px. Bei Verdana habe ich zumindest mit 13px gute Erfahrungen gemacht, gleich ob TrueType aktiviert war oder nicht. Nur stelle ich da auch nicht zur Kontrolle um und die letzte liegt schon einige Jahre zurück.

[CubeMaster]

11px ist für Verdana eine etwas unglückliche Wahl, auch unterdurchschnittlich klein, wie ich meine. Probiere es einmal mit 13px. Bei Verdana habe ich zumindest mit 13px gute Erfahrungen gemacht, gleich ob TrueType aktiviert war oder nicht. Nur stelle ich da auch nicht zur Kontrolle um und die letzte liegt schon einige Jahre zurück.

Sei mir nicht böse, ich danke dir auch für deine Antwort, aber eine Schriftart einfach größer machen ist doch keine Lösung.

Schließlich sieht die Schrift dann auch bloß vermatscht aus im IE9.

[Melegrian]

Wie ich gerade las, wäre nicht True Type sondern Clear Type die richtige Bezeichnung gewesen.

Den Rest kann ich nicht bestätigen. Wollte gerade Clear Type zum Test deaktivieren, fand die Einstellung nicht, suchte im Internet und fand nur den Hinweis, dass ab IE9 eine Deaktivierung von Clear Type für HTML-Seiten nicht mehr vorgesehen ist. Nun ja und meine Seiten werden eben mit Verdana 13px nicht verwaschen angezeigt und in älteren Browsern hatte ich es vor Jahren schon getestet. Der größte Unterschied betraf da nur Schriften mit Serifen.

[CubeMaster]

Wie ich gerade las, wäre nicht True Type sondern Clear Type die richtige Bezeichnung gewesen.

Den Rest kann ich nicht bestätigen. Wollte gerade Clear Type zum Test deaktivieren, fand die Einstellung nicht, suchte im Internet und fand nur den Hinweis, dass ab IE9 eine Deaktivierung von Clear Type für HTML-Seiten nicht mehr vorgesehen ist. Nun ja und meine Seiten werden eben mit Verdana 13px nicht verwaschen angezeigt und in älteren Browsern hatte ich es vor Jahren schon getestet. Der größte Unterschied betraf da nur Schriften mit Serifen.

Ohne Clear Type bekommt man ja ohnehin Augenkrebs aber, das Problem was ich beschreibe ist einfach etwas, was mit dem IE9 zusammenhängt.
Sprich hier kann man nur über den Dokumentenmodus in die IE8 Version zurück switchen und dann sieht plötzlich wieder alles schön aus, wie auch in anderen Browsern. Aber welcher User macht das schon? Richtig keiner.

Von daher bin ich jetzt auf der Suche nach einer Lösung, wie ich, egal bei welcher Schriftgröße, eine standardmäßig bessere Darstellung der Schrift per css erzeugen kann.

Ich kann doch nicht überall Schriftgröße 13 px verwenden! Und dann auf alle Schriftgrößen darunter verzichten müssen, dass ist doch keine Lösung.

[Melegrian]

Habe mir jetzt noch einmal meine Brille geputzt, so klar und deutlich wie im FF kommt mir die Schrift im IE auch nicht mehr vor, doch da es ja dann alle Webseiten betrifft, mache ich mir darüber keine größeren Gedanken, da IE Nutzer sich vermutlich auf leicht diesiges Wetter eingestellt haben. Der eigentliche Unterschied wird aber erst bei kleinen Schriften mit Serifen richtig deutlich. Bei dem Forum hier sehe ich zum Beispiel keinen Unterschied in der Darstellung im IE oder FF.

[Melegrian]

Ist das eine Antwort, mit der Du etwas anfangen kannst?

IE9 und Firefox 4 zeigen eine schlechte Qualität der Fonts, wenn die GPU-Beschleunigung aktiviert ist. Das liegt daran, dass DirectWrite die Fonts von der Metrik exakt, aber unschärfer darstellt.

https://www.zdnet.de/magazin/41539288/u ... twrite.htm

Und wenn ich die nächsten Seiten lese, dann frage ich mich, was ich benutze? Jedenfalls bei den Seiten, bei denen ich px-Angaben statt pt-Angaben benutze, hatte ich das Problem mit den unterschiedlich langen Zeilen noch nicht.

Die richtige Metrik muss jedoch entweder mit Unschärfen, starken Farbsäumen oder mit unschönen Zeichenabständen erkauft werden.

https://www.zdnet.de/magazin/41539288/p ... twrite.htm

Interessant finde ich auch diese Bemerkung, da ich auch nicht weiß, was ich benutze:

Die Webentwickler werden fluchen, zumal es derzeit keine Möglichkeit gibt, festzustellen, ob ein Browser seine Fonts mit GDI oder DirectWrite rendert.

https://www.zdnet.de/magazin/41539288/p ... twrite.htm

[CubeMaster]

Wie gesagt, ich kenne das Problem. Nur dachte ich eben, es gibt vielleicht eine relativ einfache Lösung.

Weil so wie es jetzt ist, besteht Aufklärungsbedarf für den Nutzer. Da ich aber stark davon ausgehe, dass es 99 % völlig egal ist, denke ich nicht, dass sich irgendeiner damit beschäftigen will.

ABER, mich hätte eben mal interessiert, wie ein Webdesigner dieses Problem löst.
Warum? Ganz einfach, man nehme an, er baut eine Website und muss diese für alle Browser kompatibel machen. Nun kommt der Kunde und hat die GPU-Beschleunigung eingestellt etc. und behauptet zu Recht, dass es vermatscht aussieht. Da kann man doch schlecht als Fachmann sagen, dass der Kunde die Hardware umstellen muss um ein klares Bild zu bekommen.

Ich komme selbst vom Fach und musste als Mediengestalter im Print bereich schon dutzende Kunden mit gestalterischen Utopien versorgen. Auch ich weiß, das die Gesellschaft nichts für gutes Design übrig hat und lieber den 1&1 Schnellbaukasten bevorzugt. ABER ich will mich doch nicht an die Gesellschaft anpassen müssen, wenn ich doch weiß das es falsch ist.

Eben das Problem hab ich jetzt mit der Font-Darstellung in den neuen Browser. Irgendwie muss das doch gehen, denn wie du richtig bemerkt hast, das Abakus-Forum sieht unter beiden Browser nahezu gleich aus, aber warum. Denn die Schriftart ist hier auch nicht riesig groß. Und eigentlich ist die Verdana die ideale Schrift auch in kleinen Schriftgraden für Bildschirme.

Ich danke dir trotzdem erstmal für deine Mühe und Zeit die du geopfert hast

Edit:
Hab hier gerade noch was äußerst interessantes gefunden: https://matthiasschuetz.com/webdesign-c ... irectwrite

[Melegrian]

Soweit wie ich das sehe, verwendet Abakus da keine außergewöhnlichen Style-Eigenschaften.

Code: Alles auswählen

/* General font families for common tags */
font{ font-family: Verdana, Arial, Helvetica, sans-serif }

/* The content of the posts (body of text) */
.postbody { font-size : 12px; line-height: 18px}

Unterschiede zwischen den Browsern gab es schon immer. Nun ja, den teuersten Editor verwende ich auch nicht, doch über eine Vorschau von IE 6 bis IE 9 in einem geteilten Fenster verfügt er und im FF und Chrome schaue ich mir die Seiten halt so mal an.

Nun habe ich zwar alle neuen Seiten der letzten Monate in der geteilten Vorschau IE 6 - IE 9 betrachtet, doch die Unterschiede bei der Schrift sind mir bisher nie so deutlich bewusst geworden. Jetzt sehe ich es auch ganz deutlich, dass die Schrift im IE 6 klarer und sauberer wirkt als im IE 9. Doch wenn mir das bisher nicht so deutlich auffiel, dann wäre mir das wohl auch weiterhin nicht so deutlich aufgefallen.

Edit: Bei 10-facher Vergrößerung wird gut ersichtlich, das der IE 9 beim Rendering für dieses Antialiasing andere Farben benutzt, als der FF 11. Der IE 9 geht auch mit den Abständen zwischen den Zeichen etwas anders um, als der FF 11. Bei meinen Seiten zumindest, bei Abakus hingegen nicht. Doch wie so bei meinen Deinen oder meinen Seiten und nicht bei den Seiten von Abakus? Das habe ich jetzt auch noch nicht herausgefunden.

Womit die Fragestellung weiterhin aktuell bleibt.

Edit 2: Eine Lösung wäre diese Zeile gleich unter dem Titel einzufügen. Darf nicht hinter anderen Tags im Head folgen! Damit funktioniert es und verwendet Abakus auch:

Code: Alles auswählen

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

[CubeMaster]

Edit 2: Eine Lösung wäre diese Zeile gleich unter dem Titel einzufügen. Darf nicht hinter anderen Tags im Head folgen! Damit funktioniert es und verwendet Abakus auch:

Code: Alles auswählen

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Hah das geht! SUPER! Genau sowas meinte ich DAAAAANKE!