Die Schrift wird in Firefox anders als in Chrome angezeigt

Es scheint, dass meine Menüleiste in Firefox mit einer anderen Schriftart angezeigt wird als in Chrome. Siehe folgendes:

Hier ist das auf dieses Element angewendete CSS:

font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

Soweit ich das beurteilen kann, ist alles in Bezug auf diese Schriftart genau gleich, sie werden jedoch unterschiedlich angezeigt (siehe Bild). Warum?

Chrome verwendet die WebKit-Rendering-Engine. Firefox verwendet die Gecko-Engine. Sowohl die Interpretation als auch die Anzeige unterscheiden sich geringfügig, ebenso wie die in IE9 + und Opera verwendeten DirectX- und Vega-Grafikmodule.

Sie können Browser nicht zwingen, Text identisch zu rendern, aber Sie können einige Dinge tun, um sicherzustellen, dass Ihre Navigation über alle Browser hinweg dieselbe Breite hat:

1. Verwenden Sie für Ihre Navigationsleistenelemente Bilder oder SVGs anstelle von Typ. Dies kann sich als nützlich erweisen, wenn sich Ihr Navigationsbereich wahrscheinlich nicht häufig ändert. zB www.apple.com

2. Korrigieren Sie die Breite jedes Navigationselements mit CSS. Die Textgröße sieht in den Browsern immer noch unterschiedlich aus. Wenn Sie jedoch jedem <li>Element in Ihrem Navigationsbereich eine feste Pixelbreite zuweisen, ist der Begrenzungsrahmen für jeden Link in allen Browsern sehr ähnlich und die Gesamtbreite des Navigationsbereichs sollte gleich sein.

Unterschiede in der Schriftwiedergabe zwischen verschiedenen Browsern (und auf verschiedenen Betriebssystemen) sind eine Tatsache. Sie müssen nur sicherstellen, dass Ihr Design auch dann noch funktioniert, wenn die Schrift in unterschiedlichen Breiten angezeigt wird.

Falls jemand darauf stößt, war das für mich das Problem letter-spacing. Chrome und Firefox behandeln die Eigenschaft unterschiedlich.

Mein Problem war, dass letter-spacingsich dies auf die Position anderer Elemente auswirkte. Insbesondere einige Bilder im Navigationsmenü. Durch das Entfernen des Grundstücks wurde mein Problem sofort gelöst.

Ich habe auch gelesen, dass die Verwendung spezifischer .pointWerte sich auf die beiden Browser auswirken kann, was in meinem Fall zutrifft.

Art der gleichen Ausgabe hier angegeben

Sie können Ihre CSS von zurücksetzen

http://developer.yahoo.com/yui/reset/ Ich hoffe, Sie bekommen eine Ahnung von

Ich habe festgestellt, dass das Webkit px für die Schriftgröße unterstützt, aber für Dinge wie den Buchstabenabstand wird alles zusammen ignoriert, wenn Sie em nicht verwenden.

Nach dem Testen von 6 Browsern / 4 Rendering-Engines auf zwei Betriebssystemen. Ich habe festgestellt, dass die meisten auch mit Zeilenabstand gleich waren. Ich werde gleich den Unterschied zwischen Windows und Linux untersuchen.

Ich dachte, die Palatino-Schrift wäre überall verfügbar, aber Chrom fiel auf die etwas kleinere römische Zeit zurück. Die Standardschrift hatte die gleichen Ergebnisse (Chrom anders), was mich ein wenig irreführte.

Wie auch immer, wenn Sie times roman angeben oder @fontface verwenden, um Schriftdateien bereitzustellen! Sie können Ihre Navigationsleisten möglicherweise glatter machen ;-)

Ich hatte ein ähnliches Problem und fand eine Lösung:

Verwenden von:

font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

In Firefox sieht es großartig aus. In Chrome war der Buchstabenabstand seltsam. Entfernen des optimizelegibilityStils hat den Trick getan. Beide Browser rendern jetzt identisch.

Ich habe mich entschlossen, den Stil für das Webkit zu entfernen und ihn für andere Browser beizubehalten. Sieht jetzt gut aus.

Ich hatte ein ähnliches Problem mit Open-Sans, das hat es für mich getan:

-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;