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?
css
firefox
google-chrome
Goro
quelle
quelle
Antworten:
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:
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
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.quelle
letter-spacing
SVG-Elemente.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.
quelle
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-spacing
sich 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
.point
Werte sich auf die beiden Browser auswirken kann, was in meinem Fall zutrifft.quelle
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
quelle
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.
quelle
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 ;-)
quelle
Ich hatte ein ähnliches Problem und fand eine Lösung:
Verwenden von:
In Firefox sieht es großartig aus. In Chrome war der Buchstabenabstand seltsam. Entfernen des
optimizelegibility
Stils 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.
quelle
Ich hatte ein ähnliches Problem mit Open-Sans, das hat es für mich getan:
quelle