Die gleiche Schriftart mit Ausnahme ihres Gewichts scheint in verschiedenen Browsern unterschiedlich zu sein

Der Text wird in Chrome korrekt angezeigt. Ich möchte, dass es in allen Browsern so angezeigt wird. Wie kann ich das machen?

Chrom:
Chrom

UPDATE: In Safari -webkit-font-smoothing: antialiased; mit -webkit-font-smoothing: antialiased;

Feuerfuchs:
Feuerfuchs

Das ist das CSS:

 font-family: Georgia; font-weight: normal; font-size: 16pt; color: #444444; -webkit-font-smoothing: antialiased; 

Und eine Geige: http://jsfiddle.net/jnxQ8/1/

Stellen Sie sicher, dass die Schriftart für alle Browser gleich ist. Wenn es dieselbe Schriftart ist, hat das Problem keine Lösung mit browserübergreifendem CSS .

Da jeder Browser über eine eigene Schriftart-Rendering-Engine verfügt, sind sie alle unterschiedlich. Sie können sich auch in späteren Versionen oder über verschiedene Betriebssysteme unterscheiden.

UPDATE : Für diejenigen, die die Unterschiede zwischen Browser- und Betriebssystem-Font-Rendering nicht verstehen, lesen Sie dies und das .

Allerdings ist der Unterschied für die meisten Menschen nicht einmal bemerkbar, und die Benutzer akzeptieren dies. Vergessen Sie pixelgenaues Cross-Browser-Design, es sei denn, Sie sind:

  1. Versuch, das Subpixel-Rendering durch CSS auszuschalten (nicht alle Browser erlauben das und der Text kann hässlich sein …)
  2. Bilder verwenden (Ressourcen sind anspruchsvoll und schwer zu pflegen)
  3. Flash ersetzen (muss programmiert werden und funktioniert nicht unter iOS)

UPDATE : Ich habe die Beispielseite überprüft. Die Optimierung des coreings durch Text-Rendering sollte helfen:

 text-rendering: optimizeLegibility; 

Weitere Referenzen hier:

  1. Ein Teil des Font-Rendering wird durch font-smoothing (wie erwähnt) gesteuert und ein anderer Teil ist das text-rendering . Das Anpassen dieser Eigenschaften kann hilfreich sein, da ihre Standardwerte nicht in allen Browsern identisch sind.
  2. Wenn Chrome für Sie immer noch nicht OK anzeigt, versuchen Sie diesen Text-Shadow-Hack . Es sollte das Rendern von Chrome-fonts verbessern, insbesondere in Windows. Allerdings wird Text-Schatten unter Windows XP verrückt. Achtung.

Um Ihre @ font-face-eingebetteten fonts in allen Browsern optimal zu standardisieren, sollten Sie die folgenden Schritte in Ihre @ font-face-Deklaration oder in Ihren Body-Font-Stil einfügen:

 speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; 

Derzeit scheint es keine universelle Lösung für alle Plattformen und Browser-Builds zu geben. Wie bereits erwähnt, haben alle Browser / Betriebssysteme unterschiedliche Text-Rendering-Engines.

Hier finden Sie einige großartige Informationen: https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Noch experimentiert aber bisher eine minimal-invasive Lösung, die nur auf FF abzielt:

 body { -moz-osx-font-smoothing: grayscale; } 

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

Ich habe diskutierte Lösungen gesammelt und getestet:

Windows10 Prof x64:

 * FireFox v.56.0 x32 * Opera v.49.0 * Google Chrome v.61.0.3163.100 x64-bit 

MacOS X Serra v.10.12.6 Mac mini (Mitte 2010):

 * Safari v.10.1.2(12603.3.8) * FireFox v.57.0 Quantum * Opera v49.0 

Semi (immer noch Mikrofett in Safari) getriggerse Fettschriften:

 text-transform: none; // mac ff fix -webkit-font-smoothing: antialiased; // safari mac nicer -moz-osx-font-smoothing: grayscale; // fix fatty ff on mac 

Habe keinen visuellen Effekt

 line-height: 1; text-rendering: optimizeLegibility; speak: none; font-style: normal; font-variant: normal; 

Falscher visueller Effekt:

 -webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari text-rendering: geometricPrecision !important; //more fatty in safari 

Vergessen Sie nicht, beim Testen zu setzen, oder stellen Sie sicher, dass Ihr Stil nicht überschrieben wird

Ich denke nicht, dass die Verwendung von “Punkten” für die Schriftgröße auf einem Bildschirm eine gute Idee ist. Verwenden Sie px oder em für die Schriftgröße.

Von W3C :

Geben Sie nicht die Schriftgröße in pt oder anderen absoluten Längeneinheiten an. Sie werden plattformübergreifend inkonsistent dargestellt und können nicht vom User Agent (z. B. Browser) angepasst werden.

Ich habe viele Seiten mit diesem Problem und fand schließlich eine Lösung für Firefox-fonts, die dicker als Chrom sind.

Sie benötigen diese Zeile neben Ihrem -webkit-Fix -moz-osx-font-smoothing: grayscale;

 body{ text-rendering: optimizeLegibility; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 

Versuchen Sie text-rendering: geometricPrecision; .

Anders als beim text-rendering: optimizeLegibility; , es kümmert sich um coreing Probleme bei der Skalierung von fonts, während die letzte coreing und Ligaturen ermöglicht.