CSS: @ font-face anti-aliasing

Question

Ich habe ein bisschen Probleme mit der CSS-Option @ font-face. Nach vielem Lesen, Versuchen und Wiederholen bin ich schließlich auf eine Website gestoßen, die Sie zu einem Ready-to-Go-Paket macht, wenn Sie Ihre Schriftart hochladen. Es läuft jetzt, aber es scheint, dass die Schriftart nicht antialiasiert wird. Während ich sehe, dass dies auf anderen Websites passiert, werden die Überschriften nicht so dargestellt, wie ich es möchte.

Mein CSS-Code:

@font-face { 
font-family: 'YanoneKaffeesatzThin'; 
src: url('../fonts/yanonekaffeesatzthin-webfont.eot'); 
src: local('☺'), url('../fonts/yanonekaffeesatzthin-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatzthin-webfont.ttf') format('truetype'), url('../fontsyanonekaffeesatzthin-webfont.svg#webfontyC5sm3N9') format('svg'); 
font-weight: normal; 
font-style: normal;} 

Was diese letzte zu machen, ist noch zu tun, aber anoying, Ausgabe weggehen?

Answer 1

Mit CSS3 können Sie die Eigenschaft font-smooth verwenden, obwohl Antialiasing immer noch von den Systemstandards gesteuert wird. Wenn Sie wirklich ein sauberes Antialiasing erzwingen müssen, egal was das Betriebssystem ist, müssen Sie sIFR verwenden, das den Text automatisch durch eine Flash-Komponente ersetzt.

Answer 2

Siehe auch: http://www.elfboy.com/blog/text-shadow_anti-aliasing/

Der Kern ist, dass das Hinzufügen text-shadow: 0 0 1px rgba(0,0,0,0.3); das Auftreten von Anti-Aliasing gibt.

Answer 3

Cufon und Typeface.js sind zwei Lösungen, die viele der in diesem Thread behandelten HTML5-, CSS3- und JS-Lösungen aggregieren und bereinigen.

Jeder verfügt über einen Konverter, der das Konvertieren von Schriftartdateien (ttf, otf, wotf) in Skripts ermöglicht, die das tun, was Sie gerade tun - eine beliebige Schriftart über das Internet mit Antialiasing bereitstellen.

Von den beiden, ziehe ich Cufon http://cufon.shoqolate.com/generate/

Answer 4

Nur eine kurze Notiz über eine nicht so häufig CSS-Regel mit Anti-Aliasing zu beschäftigen.

-webkit-font-smoothing: antialiased; 

Sie werden eine leichte Variation im Font-Rendering für Webkit-Browser haben. Im Allgemeinen erscheint die Schriftart klarer und dünner. Andere Werte:

-webkit-font-smoothing: subpixel-antialiased; 
-webkit-font-smoothing: none; 

Eine Demo-Seite: http://maxvoltar.com/sandbox/fontsmoothing/

Nicht vergessen https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions

Answer 5

Sie müssen OTF WOFF konvertieren: - (! Works)

---

OTF> WOFF

TTF -> OTF -> WOFF (Funktioniert!)

TTF -> WOFF (Hat Antialiasing, häufige Fehler in Google Fonts)

---

1e) Laden Sie die OTF font version

1º Alternative nicht) Wenn die font andere ist und TTF, konvertieren es OTF mit https://everythingfonts.com/ttf-to-otf

2e) Convert OTF zu WOFF https://everythingfonts.com/otf-to-woff

---

Verwenden Sie nur WOFF nicht EOT, SVG, WOFF2, etc ..