nicht angemeldet
mit @font-face benutzten Pixelfont an ganzen Pixeln ausrichten
Hallo,
ich benutze einen Pixelfont mit @font-face. Hier die URL:
http://danielfaller.de/pixelfont/
Der Font wird scharf dargestellt; unter Windows Vista auf Firefox und IE immer, unter Mac OS im Firefox in diesem Fall auch. Problematisch wird es auf dem Mac, wenn die Schrift nicht an ganzen Pixeln (mittels CSS und position:absolute) ausgerichtet wird. Denn dann schlägt das Antialiasing meines Mac OS zu, und die Schrift wird nicht mehr scharf dargestellt.
Im Moment gibt es keine Probleme, dank position:absolute. Was aber, wenn ich meine Seite zentriert im Browser ausrichte? Dann ist nicht mehr garantiert, dass der Text mit einem ganzen Pixel beginnt.
Nehmen wir also an, ich würde meinen Inhalt mittels
margin-left: auto;
margin-right: auto;
horizontal zentrieren.
Unter Windows Vista im Firefox oder IE wird der Font immer scharf dargestellt, unabhängig davon, wie groß ich mein Browserfenster aufziehe. Unter Mac OS verhält es sich anders: je nachdem, wie groß der Browser aufgezogen wird, wird die Pixelschrift scharf oder unscharf wiedergegeben.
Hoffe ich konnte das Problem verständlich schildern.
Meine Frage: Gibt es eine Möglichkeit, den äußersten Container zu zentrieren, ihn aber trotzdem immer an einer x-Koordinate beginnen zu lassen, wo ein ganzes Pixel ist? Ich vermute mal, das geht nicht mit CSS, und auf Flash möchte ich nicht zugreifen. Mit Javascript geht's aber vielleicht schon ...
Vielen Dank, vielleicht gibt es ja auch eine ganz einfache Lösung.
-
Meine Frage: Gibt es eine Möglichkeit, den äußersten Container zu zentrieren, ihn aber trotzdem immer an einer x-Koordinate beginnen zu lassen, wo ein ganzes Pixel ist?
Nein. Das liegt vor allem daran, dass der CSS-Pixel bereits vom realen Bildschirmpixel abstrahiert wurde (wegen immer höherer Pixeldichte neuerer Displays) und eine virtuelle, relative Einheit darstellt. Man kann sich also nie sicher sein, dass die eigenen Pixelangaben auf reale Bildschirmpixel abgebildet werden.
Dazu kommt, dass die Ausrichtung des Fonts an Bildschirmpixelraster eher weniger mit der Ausrichtung der umgebenen Boxen am Bildschirmpixelraster zu tun hat. Stattdessen wird das vom unterliegenden AA-System bestimmt. Windows' ClearType richtet die Schrift am Bildschirmpixelraster aus (tlw. automatisch, teilweise mit Hinting), auch unter der Gefahr die Proportionen und Formen der Glyphen damit zu verzerren. Dadurch kommt die „Schärfe“. Apples Subpixel-AA nimmt nun keine Rücksicht auf das Bildschirmpixelraster im Sinne der Ausrichtung, stattdessen wird versucht den Glyph so formgenau wie möglich darzustellen. Dort ist der Bildschirmpixel dann Mittel zum Zweck und in keinster Weise ausrichtendes Raster.
Unter Mac OS verhält es sich anders: je nachdem, wie groß der Browser aufgezogen wird, wird die Pixelschrift scharf oder unscharf wiedergegeben.
Es gibt derzeit keine Möglichkeit, als CSS-Autor das Antialiasing in Browsern zu beeinflussen.
Ich würde es übrigens auch so an Deiner Stelle sein lassen. Was als unscharf bis scharf bis „abartig pixelig“ empfunden wird, ist auch in vielerlei Hinsicht Gewöhnungssache. Die Damen und Herren Windows haben sich an ClearType oder direkte Pixel (Hallo Martin) gewöhnt, die Damen und Herren Mac an Mac OS X' AA – und ziehen inzwischen das Gewöhnte vor. In der Konsequenz will der Autor dann sein gewohntes Schriftbild auch auf die andere Plattform tragen – ohne zu beachten, ob das dort überhaupt gewünscht ist.
Ich würde aber komplett davon abraten, Pixelfonts in Webseiten zu verwenden. Dabei kann zuviel schief gehen, weil man viel zu wenig Kontrolle hat. Zum Beispiel, hier, was ich als Mac-Nutzer machen musste, um Deinen gewünschten Effekt ansatzweise nachzuvollziehen:
• Zuallererst sprach meine Mindestschriftgröße an und bliess Deine Pixelschrift auf. Deaktivieren.
• Mein der Lesbarkeit wegen geänderter Defaultfont wirkte sich auf die Größenberechnung des Pixelfonts aus. Zurückändern auf default.
• Trotzdem gibt es noch einen Berechnungsfehler, der Deine mit 0.5em definierte Pixelschrift auf 9px setzt. Unibody 8 ist aber laut Hersteller auf 8px Größe definiert. Also lade ich die relevanten Teile Deiner Webseite runter und ändere manuell das CSS.
• Und dann schalte ich noch das Anti-Aliasing so, dass Unibody 8 auf 8px nicht davon erfasst wird.Und trotzdem ... die Schrift ist auch ungeachtet meiner Abneigung gegen Pixelschriften nicht wirklich toll aussehend, ganz zu schweigen davon, dass 8px auf diesem Monitor, der nun nicht zu den Monitoren mit wahnsinniger High-DPI zählt so klein, dass ich den Text fast nicht mehr lesen kann.
Übrigens ist noch nicht ein Hauptproblem der Scalierung genannt: Die Möglichkeit des Full-Screen-Zooms, der inzwischen in allen Browsern vorhanden ist.
Ich halte inzwischen Pixelschriften, ob nun Bitmap- oder wie Unibody merkwürdig Vektor-basiert, im heutigen Web und in der heutigen UI für unbrauchbar. Man hat zuwenig Kontrolle über die endgültige Darstellung, insbesondere in einem Vektorschrift-Umfeld, und die immer höher werdende Pixeldichte und die immer kleiner werdenden Pixel machen einem dabei einen Strich durch die Kalkulation. Und dazu kommt eben mein privates Empfinden: dass die Kleinheit von Pixelfonts nutzerunfreundlich ist.
-
hallo tim, vielen dank für deine ausführliche antwort. ich werde wohl auf die nutzung des fonts verzichten. obwohl ich die unibody schon sehr mag und für sehr gelungen halte. deine kritik bez. nutzer(un)freundlichkeit kann ich nachvollziehen – allerdings finde ich, dass pixelfonts für kurze texte wie z.B. sich immer wiederholende Kategorien o.ä. vertretbar sind.
-