Die Schrift wird in Firefox anders als in Chrome angezeigt

14

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

verschiedene Schriften dehnen

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?

Goro
quelle
1
Haben Sie zuerst einen CSS-Reset durchgeführt?
Mittwoch,
@ Kei: Reset scheint keine Wirkung zu haben
Goro
Interessant. Ich erhalte das gleiche Ergebnis wie Ihr Bild: jsfiddle.net/YGwcn Es scheint, als würde es darauf ankommen , wie jeder Browser den Stil interpretiert.
Mittwoch,

Antworten:

14

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.

Nick
quelle
5
Seien Sie vorsichtig mit Dingen wie "Verwenden Sie Bilder anstelle von Text für Ihre Navigationsleistenelemente". Die Bilder sehen auf neueren Computern mit hochauflösenden Displays (z. B. Apple "Retina" -Displays, einige andere Smartphones) furchtbar aus, es sei denn, Sie bieten auch eine Kopie mit doppelter Auflösung an.
Olly Hodgson
@OllyHodgson Sicher. PNGs oder SVGs in doppelter Größe (wie sie von Apple für die Navigation verwendet werden) eignen sich am besten für hochauflösende Bildschirme.
Nick
@ Nick - Ja, SVG wäre die beste Lösung.
m93a
Nicht in diesem Fall würde es nicht. Firefox unterstützt keine letter-spacingSVG-Elemente.
Yay295
@ Yay295 Sie können Schriftarten in der SVG skizzieren.
Nick
5

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.

paulmorriss
quelle
2

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.

Mike
quelle
0

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.

Alan Hughes
quelle
0

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 ;-)

Kevin Chadwick
quelle
0

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.

Andy
quelle
0

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

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