Webfont-Glättung und Antialiasing in Firefox und Opera

Ich habe auf meiner Website maßgeschneiderte Web-Schriftarten verwendet. Um meine Rendering-Ausgabe zu formatieren, habe ich den folgenden Code verwendet:

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

Dies funktioniert gut in Safari und Chrome (Kanten sind schärfer und Linien sind dünner). Gibt es eine Möglichkeit, den gleichen Stil in Firefox und Opera zu implementieren?

Da Opera von Blink betrieben wird, -webkit-font-smoothing: antialiasedfunktioniert Version 15.0 auch unter Opera.

Firefox hat endlich eine Eigenschaft hinzugefügt, um Graustufen-Antialiasing zu ermöglichen. Nach einer langen Diskussion wird es in Version 25 mit einer anderen Syntax verfügbar sein, die darauf hinweist, dass diese Eigenschaft nur unter OS X funktioniert.

-moz-osx-font-smoothing: grayscale;

Dies sollte verschwommene Symbolschriftarten oder hellen Text auf dunklem Hintergrund korrigieren.

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Sie können meinen Beitrag über das Rendern von Schriftarten unter OSX lesen, der ein Sass-Mixin enthält, um beide Eigenschaften zu behandeln.

Nun, Firefox unterstützt so etwas nicht.

Auf der Referenzseite von Mozilla wird angegeben, dass font-smoothdie CSS-Eigenschaft die Anwendung von Anti-Aliasing beim Rendern von Schriftarten steuert. Diese Eigenschaft wurde jedoch aus dieser Spezifikation entfernt und befindet sich derzeit nicht in der Standardspur.

Diese Eigenschaft wird nur in Webkit-Browsern unterstützt.

Wenn Sie eine Alternative wünschen, können Sie dies überprüfen:

• Text-Shadow Anti-Aliasing | Philip Renich, Websites - Blog
• cufón - Schriften für die Menschen

Fall: Heller Text mit zackiger Webschrift auf dunklem Hintergrund Firefox (v35) / Windows
Beispiel: Google Web Font Ruda

Überraschende Lösung -
Hinzufügen der folgenden Eigenschaft zu den angewendeten Selektoren:

selector {
    text-shadow: 0 0 0;
}

Eigentlich ist das Ergebnis das gleiche wie bei text-shadow: 0 0;, aber ich möchte den Unschärferadius explizit einstellen.

Es ist keine universelle Lösung, kann aber in einigen Fällen hilfreich sein. Darüber hinaus habe ich bisher keine negativen Auswirkungen dieser Lösung auf die Leistung erfahren (auch nicht gründlich getestet).

Nachdem ich auf das Problem gestoßen war, stellte ich fest, dass meine WOFF-Datei nicht ordnungsgemäß erstellt wurde. Ich schickte eine neue TTF an FontSquirrel, die mir eine ordnungsgemäße WOFF gab, die in Firefox reibungslos war, ohne dass zusätzliches CSS hinzugefügt wurde.

Ich habe die Lösung mit diesem Link gefunden: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Schritt für Schritt Methode:

• Senden Sie Ihre Schriftart an einen WebFontGenerator und holen Sie sich die Zip-Datei
• Suchen Sie die TTF-Schriftart in der Zip-Datei
• Führen Sie dann unter Linux diesen Befehl aus (oder installieren Sie ihn mit apt-get install ttfautohint):
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• Senden Sie dann noch einmal die neue TTF-Datei (neosansstd-black.changed.ttf) auf dem WebFontGenerator
• Sie erhalten eine perfekte Zip mit all Ihren Webfonts!

Ich hoffe das wird helfen.

... im Body-Tag und diese aus dem Inhalt und der Schrift sehen im Allgemeinen besser aus ...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

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


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

Wenn die Farbe des Textes in Safari und Chrome dunkel ist, habe ich mit der CSS-Eigenschaft für Striche bessere Ergebnisse.

-webkit-text-stroke: 0.5px #000;

Hinzufügen

font-weight: normal;

Auf Ihre @ font-face-Schriftarten wird das fette Erscheinungsbild in Firefox korrigiert.