Wie kann ich das Aliasing reduzieren, das beim Skalieren meiner benutzerdefinierten Symbol-Webschriftart auftritt?

Ich versuche, meine eigenen Symbole zu erstellen und sie in eine benutzerdefinierte Webschriftart einzubetten. Dafür verwende ich Illustrator & Icomoon.

Ich gestalte die Icons in einem 14x14pxQuadrat, dann erstelle ich meinen Webfont mit Icomoon und wenn ich das Ergebnis in Chrome sehe, sieht es pixelgenau aus, aber nur bei font-size: 14px;.

font-sizeWenn ich die auf 16pxoder oder was auch immer für eine Zahl skaliere 23px, die kein Vielfaches von ist 14px, sehen die Symbole nicht scharf aus:

Bei 14pxsehen die Symbole gestochen scharf aus:

Icons bei 14px sehen scharf aus

Bei 18px, könnte besser sein ...

Symbole bei 18px

Ich weiß, dass dies erwartet wird, aber mir ist aufgefallen, dass Symbole wie FontAwsome oder Glyphicons viel besser skalieren als meine benutzerdefinierte Schriftart.

Notizen (in Illustrator):

  • Ich benutze das "Raster"
  • Ich verwende die Einstellung "An Pixel ausrichten".
  • Ich verwende die Einstellung "Pixelvorschau".

Also habe ich mich gefragt, ob mir beim Speichern des Symbols als SVG eine Einstellung in Illustrator fehlt?

Oder wenn ich etwas in Icomoon vermisse, oder sollte ich vielleicht ein anderes Programm verwenden?

Wie kann ich dafür sorgen, dass meine benutzerdefinierte Webschriftart besser skaliert werden kann, wenn sie nicht genau proportional zu ihrer ursprünglichen Größe skaliert wird?

Es könnte einige schriftartspezifische Tricks geben (etwas, das vielleicht mit Hinweisen zu tun hat?), Aber wenn das nicht funktioniert, könnte es besser funktionieren, wenn Sie sie mit 16 Pixeln pixelgenau machen? 16 ist viel teilbarer als 14 und jede Erhöhung um ganze Pixel kann in 1/2, 1/4, 1/8 usw. usw. erfolgen, was möglicherweise sauberer ist als die ungeraden Brüche von 14
Ja, Ihr Punkt über 16pxvs 14pxmacht sehr viel Sinn. Aber ich frage mich immer noch, warum FontAwesome (Pixel-Perfect/designed at 14px) gut skaliert.
nur eine Vermutung, aber es hört sich so an, als würde die Webschriftart auf 14 Pixel hinweisen, aber keine anderen Größen. Können Sie die Hinting-Größen beim Erstellen der Schriftarten ändern?

Antworten (2)

Soweit ich weiß, geht es hier um Font Hinting . Wenn eine Schriftart entworfen wird, muss sie bestimmte Regeln haben, um in verschiedenen Größen gut auszusehen. Die meisten Icon-Fonts haben diesen Hinweis für viele Größen nicht und haben daher "Rundungsfehler", die Ihnen Halbpixellinien geben. Dadurch wird das Symbol unscharf. Bei korrektem Hinting 'rasten' die Icons auf Pixeln ein.

Bei größeren Größen gibt es normalerweise kein Problem. IMHO kann man da nicht wirklich was machen.

Als Antwort auf den Chrome-Fix: Chrome verwendet jetzt das Windows Graphic Device Interface (?) für Schriftarten, sodass es genauso aussieht wie im IE.

Vielleicht sollten Sie sich eine offizielle Schriftartenanwendung zum Erstellen von Schriftarten wie Fontographer ansehen ? Auf diese Weise können Sie das Hinting kontrollieren.'

Wenn Sie Windows und Chrome verwenden, gibt es einen kleinen Unterschied in der Schriftwiedergabe (im Vergleich zu OSX- und Linux-basierten Systemen). Ich bin mir nicht ganz sicher, ob Ihnen das helfen wird, aber sehen Sie sich diesen folgenden Link an (der Code zwingt -webkit-Browser, SVG-Schriftarten zu verwenden).

FEST! Font-Face Chrome-Rendering

Wie kann ich das Aliasing reduzieren, das beim Skalieren meiner benutzerdefinierten Symbol-Webschriftart auftritt?
AntwortenHierDatenschutz-Bestimmungen1y, 0v