Webfont-Glättung und Antialiasing in Firefox und Opera

112

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?

matt
quelle
5
Es wäre eine gute Idee, damit aufzuhören und hier zu lesen, warum: usabilitypost.com/2012/11/05/stop-fixing-font-smoothing
fregante
20
^ Dies ist eine breite Verallgemeinerung und es ist in Ordnung, die Schriftglättung zu verwenden. Es ist das Rendering-Problem, das das Problem ist, nicht das Designer-Verhalten. Wenn Sie ein Layout entwerfen und die Schriftart aufgrund der Rendering-Engine halb fett erscheint, muss die Engine repariert werden, nicht das Layout.
Dylan
1
Es ist nicht ganz eine breite Verallgemeinerung. Der Artikel besagt, dass das Rendern von Subpixeln in erster Linie dazu gedacht war, hellen Text auf dunklem Hintergrund besser lesbar (dh zugänglich) zu machen und eine breite CSS-Definition wie body { -webkit-font-smoothing: antialiased; }zu schwerfällig zu machen.
Matt Scheurich
3
Meine Web-Schriftarten, die auf hellem Hintergrund dunkel sind, werden ebenfalls "faux fett". Ich sage überall "antialiased".
Jason T Featheringham
5
Wie eine Seite angezeigt wird, hängt vom Designer ab, einschließlich aller typografischen Attribute. Es liegt in ihrer Verantwortung, Benutzerfreundlichkeit, Konsistenz und Attraktivität für die unterschiedlichsten Plattformen sicherzustellen. Der Zugriff auf Attribute zur Schriftglättung über CSS ermöglicht eine bessere Kontrolle. Wie alles kann es in den falschen Händen missbraucht werden. Es ist jedoch nicht hilfreich, die persönliche Philosophie zu bewerben, anstatt die Frage zu beantworten.
Beejor

Antworten:

193

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.

Maximilian Hoffmann
quelle
6
Warum nur OSX?
Yassir Ennazk
7
Windows und Linux verwenden andere Rendering-Algorithmen für Schriftarten als OSX.
Maximilian Hoffmann
15

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:

Jonathan Naguin
quelle
2
Nun, das Problem, das ich habe, ist, dass meine Schriften in Firefox und Oper "fett" und aufgebläht aussehen. Mit -webkit-font-smoothing:antialiased;konnte ich es in Safari und Chrome beheben. Ich würde gerne einen "Hack" finden, um meine Schriftarten auch in Firefox ein bisschen leichter zu machen. Ich dachte daran, ein Weiß text-shadownur in Moz darauf aufzutragen, aber es gibt keine Möglichkeit, einen "eingefügten" Textschatten anzuwenden, der die Schrift heller machen würde.
Matt
1
@matt In dieser Frage können Sie einige CSS-Ratschläge ausprobieren: stackoverflow.com/questions/761778/… Vielleicht finden Sie eine CSS-Alternative.
Jonathan Naguin
11

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

Volker E.
quelle
Hilft nicht
vsync
Dies führt zu mutigeren Schriftarten auf Chrom basierend auf der Schriftart
Ben Sewards
1
@BenSewards Würden Sie eine Schriftart bereitstellen, bei der Sie auf eine mutigere Schriftwiedergabe gestoßen sind? Oder vielleicht sogar einen CodePen? Danke im Voraus.
Volker E.
1
@ VolkerE. Danke für die tolle Lösung. Ich habe das gleiche nervige Problem mit der Quellcode-Pro-Schriftart in einem Sticky-Header. Wenn ich scrolle, wird die Schrift sehr klein und mit Ihrem Textschatten macht die Schrift keine Probleme.
Evolutio
Auf aktuellem Chrom (58.0.3029.110) sieht der "glatte" Text wirklich schrecklich aus. (Der "zackige" Text ist etwas besser)
RecursiveExceptionException
7

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.

azenet
quelle
ist es in Windows?
Vignesh
5

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.

Plici Stéphane
quelle
Hat großartige Arbeit geleistet, um das Zacken von Schriftarten während CSS-Übergängen zu beheben (obwohl es nicht vollständig entfernt wurde). Ich habe FontSquirrel Generator mit TTFAutohint Option verwendet
Andrey
Ich habe Fontie verwendet, um meine WOFF-, WOFF2-, EOT- und SVG-Dateien mit aktiviertem Autohint für Windows neu zu generieren.
Dominique
4

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

}
user3634787
quelle
2
Es tut mir leid ... was ist "reinschreiben"? Die meisten von uns sprechen kein Deutsch, daher wäre es schön, wenn Sie Ihren gesamten Beitrag auf Englisch verfassen würden.
Rayryeng
3
Oh bitte, ich entschuldige mich, hatte mit Google übersetzt und irgendwie ist das falsche Wort da ausgerutscht :)
user3634787
3

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;
Christelle
quelle
Die Frage betrifft Firefox und Opera. Diese Antwort hat also nichts mit der Frage zu tun
vsync
-4

Hinzufügen

font-weight: normal;

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

Aaron VIII
quelle
7
font-weight(nicht überraschend) wirkt sich auf die Schriftgröße aus, nicht auf die Glättung der Schrift. Das Hinzufügen zu @ font-face-Deklarationen führt zu Verwirrung, wenn die verknüpfte Schriftartdatei keine normalgewichtige Schriftartdatei ist.
Mike Meyer
@ MikeMeyer Eigentlich stimme ich Aarons Kommentar zu. Hinzufügen der Schriftgröße: Normal zu einer Schriftart, bei der es sich um eine "leichte" Schriftart handelt, scheint Verwirrung zu stiften, sollte jedoch nur den unerfahrenen Entwickler verwirren. Nach meiner Erfahrung ist es eine gute Praxis, einen Standardwert für "Normal" anzugeben. Normal bezieht sich in diesem Fall auf "normal" für die enthaltene Schriftart und die verwendeten Zeichen und soll keine Informationen über die Schriftart selbst angeben. In vielen Fällen (insbesondere auf großen Plattformen) wird die Wahrscheinlichkeit von Fehlern aufgrund der allzu typischen schlechten Architektur, die Sie bei Schriftstilen sehen, verringert.
Dudewad
Tatsächlich sollte der Name der Schriftart selbst standardmäßig die Gewichtung der Schriftart angeben ...!
Dudewad
@dudewad, das ist großartig, dass Sie zustimmen, und ja, es ist ein anständiger (wenn auch ziemlich knapp formulierter) "Pro-Tipp" font-weight. OP fragte nicht nach - er font-weightfragte nach Antialiasing . Dies ist eine richtige Antwort auf eine ganz andere Frage.
Mike Meyer
@ MikeMeyer du hast vollkommen recht. Ich werde manchmal ein wenig mitgerissen. ;)
Dudewad