tricks - CSS: @ font-face anti aliasing

font smoothing css w3schools

Question

Estoy un poco luchando con la opción @ font-face CSS. Después de leer, intentar y volver a intentar, finalmente encontré un sitio web que te hace un paquete listo para usar cuando subes tu fuente. Se está ejecutando ahora, pero parece que la fuente no tiene suavizado. Mientras veo que esto sucede en otros sitios web, el mío no hace que los encabezados sean como yo 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;}

¿Qué queda por hacer para que este último problema, pero molesto, desaparezca?

Answer 1

Con CSS3, puede usar la propiedad de font-smooth , aunque el antialiasing todavía estará controlado por los valores predeterminados del sistema. Si realmente necesita forzar un suavizado limpio sin importar cuál sea el sistema operativo, debe usar sIFR que reemplaza automáticamente el texto con un componente de Flash.

Answer 2

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

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

De los dos, prefiero Cufon cufon.shoqolate.com/generate

Answer 3

Necesitas convertir OTF a WOFF:

OTF -> WOFF (Funciona!)

TTF -> OTF -> WOFF (¡Funciona!)

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

1º) Descarga la versión tipográfica de OTF.

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

2º) Convierta OTF a WOFF https://everythingfonts.com/otf-to-woff

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

Answer 4

Solo una breve nota sobre una regla de CSS no tan común para tratar los antialias.

-webkit-font-smoothing: antialiased;

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

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

Una página de demostración: http://maxvoltar.com/sandbox/fontsmoothing/

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

Answer 5

También vea: http://www.elfboy.com/blog/text-shadow_anti-aliasing/

Lo esencial es que al agregar text-shadow: 0 0 1px rgba(0,0,0,0.3); Da la apariencia de anti-aliasing.