Die Verwendung einer Symbolschrift (Font Awesome) sieht ein wenig verschwommen und zu fett aus

Question

Ich benutze Font Awesome, um Symbole auf meiner Website zu erstellen, und während sie auf dem iPod Touch mit Retina Display fantastisch aussehen, sehen sie auf meinem iMac aus etwas verschwommen und weniger definiert.

Hier ist ein Bild zu zeigen:

Wie Sie sehen können, die Schriftart sieht wirklich nett und crispt auf dem Retina Display iPod Touch, aber auf dem iMac, es ist irgendwie beschissen.

Was verursacht das? Ist dies mit Anti-Aliasing zu tun? Kann ich etwas dagegen tun?

Answer 1

Probleme wie diese hängen wahrscheinlich mit Anti-Aliasing oder Hinting zusammen. Schriftarten müssen an einem Raster ausgerichtet sein, wenn sie bei kleineren Größen gut aussehen sollen. Die GitHub-Jungs schrieben eine großartige blog post darüber, wie sie Sauberkeit in ihrer benutzerdefinierten Schriftart verwaltet.

Ich würde versuchen, es auf einem Raster auszurichten und in die Fußstapfen der GitHub Leute zu folgen. Sie haben ihre Icons gut gemacht.

Auch: haben die Symbole unterschiedliche numerische Größen zwischen dem iPod Touch und dem iMac, oder ist das ein Nebeneffekt von verschiedenen DPI-Einstellungen? Das kann auch beim Font-Rendering problematisch sein.

Wenn möglich, spielen Sie mit Ihren DPI-Einstellungen herum. Ich benutze keine Macs, daher weiß ich nicht, wie ich diese Einstellungen ändern kann. Das zugrunde liegende Grid-Problem wird jedoch weiterhin nicht behoben. Können Sie die betreffenden Schriften bearbeiten?

Answer 2

Hinzufügen zu @ sporkbox Antwort, wenn Sie besonders besorgt über Webkit-Browser sind, gibt es folgende CSS-Optionen können Sie verwenden:

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit 
-webkit-font-smoothing : none | subpixel-antialiased | antialiased 

Answer 3

Ich habe festgestellt, dass einige Browser versuchen, einen fett zu emulieren Schriftart, wenn kein fettes Gewicht verfügbar ist, indem die Linien dicker gemacht werden, was zu der Situation führt, die Sie beschreiben. Bist du sicher, dass das irgendwo erscheint, wo du font-weight: normal; hast?

Answer 4

Verwenden CSS Schriftglättung:

-webkit-font-smoothing: antialiased; 

Answer 5

-webkit-Perspektive: 1000;

es Fest für mich

Answer 6

gibt es einen seltsamen Trick, der irgendwann funktioniert, versuchen:

-webkit-transform:rotateZ(0); 
-moz-transform:rotateZ(0); 
-o-transform:rotateZ(0); 
transform:rotateZ(0); 

, wenn Sie einen Block zentriert haben, versuchen Sie, wenn links zu überprüfen Offset eine ganze Zahl. Sie können Javascript verwenden, um es zu überprüfen und zu beheben. Ich kann helfen, wenn du willst.

Answer 7

beste Cross-Browser-Lösung ist:

.your_font_class{ 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
} 

Answer 8

Einige der vor irgendwie genannten Lösungen/sorta hat den Trick aber was regelte es für mich zu entfernen (kommentiert out) die Schriftgröße Erbe der „fa "Klasse in font-awesome.css (und font-awesome.min.css):

font-size: inherit; 

Das Endergebnis der Klasse sieht wie folgt aus:

.fa { 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    /* font-size: inherit; */ 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

Zusätzlich dazu hatte ich die große Symbole anpassen, weil sie durch Kommentare zu weit nach unten gedrückt wurden immer diese Zeile aus dem "fa-lg" Klasse:

vertical-align:-15% 

die Klasse sieht wie folgt aus

.fa-lg { 
    font-size: 1.33333333em; 
    line-height: 0.75em; 
    /* vertical-align: -15%; */ 
} 

Ich benutze Font Awesome 4.7.0