CSS: @ font-face anti aliasing

Question

Estoy un poco luchando con la opción @ font-face CSS. Después de leer mucho, intentar y volver a intentarlo, finalmente encontré un sitio web que lo convierte en un paquete listo para usar cuando carga su fuente. Se está ejecutando ahora, pero parece que la fuente no tiene antialias. Si bien veo que esto sucede en otros sitios web, el mío no representa los títulos de la manera que quiero.

Mi código CSS:

@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;} 

lo que queda por hacer para que este último, pero evitará, tema se vaya?

Answer 1

Con CSS3, puede usar la propiedad font-smooth, aunque el antialiasing seguirá estando controlado por los valores predeterminados del sistema. Si realmente necesita forzar un antialiasing limpio sin importar el sistema operativo, debe usar sIFR, que reemplaza automáticamente el texto por un componente Flash.

Answer 2

Véase también: http://www.elfboy.com/blog/text-shadow_anti-aliasing/

Lo esencial es que la adición de text-shadow: 0 0 1px rgba(0,0,0,0.3); da la apariencia de anti-aliasing.

Answer 3

Cufon y Typeface.js son dos soluciones que agregan y desinfectan muchas de las soluciones HTML5, CSS3 y JS discutidas en este hilo.

Cada uno tiene un convertidor que permite que los archivos de fuente (ttf, otf, wotf) se conviertan en scripts que hacen lo que usted está tratando de hacer: entregar cualquier fuente en la web, antialias.

De los dos, prefiero Cufón http://cufon.shoqolate.com/generate/

Answer 4

Sólo una breve nota acerca de una regla CSS no tan común para hacer frente a antialias.

-webkit-font-smoothing: antialiased; 

Tendrá una ligera variación en la representación de fuentes para navegadores webkit. En general, la fuente aparece más clara y delgada. Otros valores:

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

una página de prueba: http://maxvoltar.com/sandbox/fontsmoothing/

No hay que olvidar https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions

Answer 5

Es necesario para convertir OTF a WOFF: - (! Works)

---

OTF> WOFF

TTF -> OTF -> WOFF (Works!)

TTF -> WOFF (No funciona antialising, error común en Google Fonts)

---

1º) Descargar la alternativa OTF font version

1º) Si la fuente es otra y es TTF, convertir a OTF con https://everythingfonts.com/ttf-to-otf

2º) Convertir SON que WOFF https://everythingfonts.com/otf-to-woff

---

Use solo WOFF no EOT, SVG, WOFF2, etc.