Wie werden Schriftgrößenwerte auf CSS-Renderern zwischen Browsern verschoben?
CSS em sind ein großartiges Werkzeug, aber es gibt Dinge, die mich immer verärgert haben, wahrscheinlich weil ich sie nicht vollständig verstehe.
Schriften werden nicht bei jeder Größe richtig wiedergegeben, besonders schlecht bei ungenauen Werten. Wenn Sie% ce_de% genaue Pixelwerte für Schriftarten verwenden möchten, müssen Sie also Dinge tun (vorausgesetzt, Sie haben die 16px Schriftgröße des Körpers nicht geändert):
%Vor% Vielleicht wollten Sie nur die Größe etwas erhöhen, aber dann haben Sie erkannt, dass em = 0.9em , und dann haben Sie Angst, dass Ihre Schriftart verschwommen aussehen könnte! In jedem Fall, wenn Sie einem Absatz ein 14.4px von font-size ( 1.25em ) geben und dann die Körpergröße von 16px zu 14px ändern, dann wäre der Absatz 18px . Verschwommen wieder!
Angenommen, wir arbeiten an üblichen 1 × Ration-Screens wie Desktops, wie würde zum Beispiel eine 17.5px font rendern? Ich habe sie auf eine Test-HTML-Datei gedruckt und sie scheinen genau wie eine 11.5px Schriftart aussehen. Aber ist dies das empfohlene Verhalten unter allen Browsern? Und was ist mit Größen wie Padding und Rand, die bei der Verwendung von ems durch die Schriftgröße bestimmt werden können? Werden sie auch aufgerundet?
BEARBEITEN: Ich habe einen Vergleich zwischen den Renderings in drei Hauptbrowsern gemacht. Hier ist es:
Ich habe es etwas vergrößert (200%), so dass es einfacher ist, die Details zu sehen. Oben sehen Sie, wie der gleiche Text bei 14px (links) und 14,4px (rechts) rendert. Unten habe ich sie auf Photoshop mit dem Differenz-Mischmodus überlagert, um zu sehen, ob überhaupt ein Unterschied besteht. Wie Sie sehen, rundet Chrome die Schriftgröße ab und rendert sie in der gleichen Größe, während die Höhe der Box unterschiedlich ist. Firefox hat dieselbe Höhe, aber die Schrift rendert sich leicht auf der x-Achse, während die Höhe der Schrift gleich erscheint. IE Ergebnis ist eine Art Mischung. Auf jeden Fall bin ich wirklich überrascht, denn die 14.4px-Schrift scheint überhaupt nicht verwaschen zu sein.
3 Antworten
Es ist keine einfache Frage und trifft nicht "genau" auf den Browser zu. Es handelt sich eher um das gesamte Rendering-System und um "kontinuierliche Leerstellen vs. diskrete Leerstellen" oder "zeichne eine Kurve mit quadratischen Boxen".
Einige Texte, die helfen könnten, die Frage besser zu verstehen:
(Probieren Sie die Ergebnisse von google search "font rendering diskret space", "sub-pixel font rendering" oder "font hinting")
ausEin "richtiges" Verhalten ist hier schwer zu definieren, und so wird ein "Standardverhalten" fast unmöglich. Es ist eine mathematische Frage über Raum und menschliche Wahrnehmung mehr als über Browserverhalten oder CSS.
... das beschriebene Verhalten über "1 Pixel bewegen" steht in Zusammenhang mit der Schriftart, die der Browser oder das System verwendet.
Aber ist dies das empfohlene Verhalten unter allen Browsern?
Hier ist, was ich auf w3.org
gefunden habeDas Referenzpixel ist der visuelle Winkel eines Pixels auf einem Gerät mit einer Pixeldichte von 96 dpi und einem Abstand vom Leser einer Armlänge. Für eine nominelle Armlänge von 28 Zoll beträgt der Sichtwinkel daher etwa 0,0213 Grad. Zum Lesen auf Armlänge entspricht 1px also etwa 0,26 mm (1/96 inch).
So 1px entspricht nicht unbedingt dem 1 Pixel auf dem Bildschirm, siehe Bild unten:
Auch wenn Sie basierend auf 0.25px (unter Verwendung des obigen Pixelwerts) berechnen könnten, um Elemente um 1 Literalbildpixel zu verschieben, ist dies nicht der Fall.
Und was ist mit Größen wie Padding und Rand, die bei der Verwendung von ems durch die Schriftgröße bestimmt werden können? Werden sie auch zusammengerafft?
Schauen Sie sich diese Frage an, es könnte nützlich sein. Grundsätzlich sind die Werte gerundet . Der Grund dafür, dass Ihr 11.5px genauso aussah wie 12px , war, dass es aufgerundet wurde. 11.4px würde genauso aussehen wie 11px
Sehen Sie sich auch diese Website an. es bietet ein interessantes Verhalten, wie das funktioniert.
Sehen Sie sich das Code-Snippet unter einem Beispiel an. Sehen Sie, wie das div nur um ein Pixel auf translateY(0.5px) verschoben wird, dies beweist, dass der Browser den Wert rundet: