Wenn ich vergleichehttps://www.example.comBei Chrome und Firefox sehe ich bei Firefox deutlichere Ergebnisse als bei Chrome.
Warum ist das so? Und wie kann ich das Problem beheben?
(Der obere Screenshot zeigt Chrome, der untere Firefox.)
Antwort1
Der Abstand ist etwas anders, aber ich denke, es handelt sich um eine optische Täuschung, die auf dem Anti-Aliasing und den Randfarben beruht. Hier sind ein paar Ausschnitte, die auf 800 % vergrößert wurden:
Chrome, dann Firefox, fettgedruckte Buchstaben:
Normaler Chrome-Text:
Normaler Text in Firefox:
Das dunkle Erscheinungsbild des Buchstabens wird durch eine „durchschnittliche“ oder kollektive Dunkelheit mehrerer benachbarter Pixel erzeugt. In einigen Fällen rendert ein Browser den vertikalen Balken eines normalen Buchstabens mit zwei dunkel gefärbten Pixeln und der andere verwendet ein zentrales, sehr dunkles Pixel, das von Pixeln zweier heller Farben umgeben ist, oder einer verwendet zwei mitteldunkle Farben nebeneinander und der andere verwendet eine sehr dunkle Farbe neben einer hellen Farbe. Gute Beispiele: t(1. Zeichen der ersten Zeile) und pl(zweites und drittes Zeichen der zweiten Zeile).
Die dunkleren Anti-Aliasing-Farben auf der linken Seite lassen edie Chrome-Darstellung breiter erscheinen als die Firefox-Version. Der vertikale Balken dsieht in Firefox fetter aus, während der vertikale Balken bin Chrome fetter aussieht.
Um genauer zu werden, vergleichen Sie den Kleinbuchstaben m, den ersten Buchstaben der zweiten Zeile des normalen Textes. Für dieses Zeichen erscheint Firefox fetter, wenn Sie die vertikalen Linien betrachten. Warum?
Beide Browser rendern die vertikalen Balken als drei Pixelspalten, sodass die Linien tatsächlich gleich breit sind. Die Komponentenfarben lassen die vertikalen Balken in Firefox jedoch breiter erscheinen. Sehr helle Farben beeinflussen die scheinbare Breite weniger als dunkle Farben. Mittlere bis dunkle Farben (Helligkeitswert bis knapp über 50 %) haben den größten Effekt. Ich habe die Farbe jedes vertikalen Balkens abgetastet und sie mithilfe des HSL-Farbraums in den Helligkeitswert umgewandelt:
Die ersten Beine haben beide einen sehr dunklen Mittelbalken mit einem grenzwertig dunklen Balken daneben. Die Firefox-Balken sind etwas dunkler.
Im mittleren Abschnitt hat Chrome nur einen dunklen Balken und dieser ist sehr dunkel (schwarz). Firefox hat einen dunklen Balken und einen mitteldunklen Balken, die beide „viel“ heller sind als der schwarze Balken von Chrome. Aber sie sind beide dunkel genug, um als dunkel wahrgenommen zu werden, sodass der Firefox-Abschnitt breiter erscheint.
Auf der rechten Seite hat Chrome einen dunklen Balken und Firefox zwei mitteldunkle Balken. Sie sind beide wesentlich heller als die dunklen Balken von Chrome, aber dunkel genug, um als dunkel wahrgenommen zu werden. Daher sieht dieses Bein in Firefox auch breiter aus.
Da es sich um dunkle Buchstaben auf weißem Hintergrund handelt, ist es einfacher, sich dies im Sinne von Dunkelheit statt Helligkeit vorzustellen. Daher zeigt die folgende Tabelle die Komplementärwerte (selbst helle Farben tragen etwas Dunkelheit bei, wenn sie in Normalgröße betrachtet werden):
Wenn man die Buchstaben in normaler Größe betrachtet, ist es mehr oder weniger die Gesamtmenge an „Dunkelheit“ in der Buchstabenkontur und in gewissem Maße die scheinbare Breite der Linie, die die Illusion von Fettheit erzeugt. Das obige Diagramm fasst die Dunkelheitswerte für alle Schenkel des Buchstabens zusammen m. Firefox mist 15 % dunkler als Chrome m. Wie bereits beschrieben, ist die scheinbare Linienstärke in Firefox breiter, aber das ist bei normaler Größe und Betrachtungsgeschwindigkeit nicht so wahrnehmbar.
Daher erscheint Firefox mfetter als Chrome. Beachten Sie jedoch, dass dies von Zeichen zu Zeichen unterschiedlich ist. Der erste Buchstabe t, der dritte Buchstabe b, das fin „for“, dann pund das tvor dem hin der zweiten Zeile gehören zu den Zeichen, die in Chrome aus demselben Grund fetter dargestellt werden.
Bei manchen Buchstaben sieht ein senkrechter Strich in einem Browser fetter aus, und ein anderer senkrechter Strich desselben Buchstabens sieht in einem anderen Browser fetter aus. Beispielsweise das „ hund“ uin „ohne“ in der zweiten Zeile.
Antwort2
Bei genauer Betrachtung dieser Screenshots bei starker Vergrößerung scheint es, dass die oberen (Chrome) Glyphen tatsächlich geringfügig breiter und fetter sind als die unteren (Firefox).
Beide verwenden Subpixel-Antialiasing mit der entsprechenden RGB-Reihenfolge für die meisten modernen Displays bei nativer Auflösung, obwohl die Details von Kerning und Hinting unterschiedlich sind. Beachten Sie, dass am Ende der ersten Zeile das Paar „Yo“ in Chrome weiter auseinander liegt (was auf schlechtes Kerning hindeutet) und die gesamte Zeile etwas mehr Platz einnimmt.
Verwirrung kann entstehen, wenn Sie Ihren Monitor kopfüber oder im Hochformat betreiben, eine nicht native Auflösung verwenden oder wenn es sich um einen CRT handelt. All diese Dinge verstoßen gegen die Annahmen des Subpixel-Antialiasings, und Sie sollten Ihr Betriebssystem entsprechend konfigurieren.