@ font-face para fuentes personalizadas, tipos de letra no uniformes en Chrome

Question

Tengo una aplicación web que está utilizando @ font-face de CSS3 para incrustar fuentes personalizadas. Hasta ahora, esto funciona perfectamente en IE y Firefox.

Con Chrome, sin embargo, las fuentes personalizadas aparecen pixeladas y no son uniformes. A continuación se muestra un enlace a un fragmento de la pantalla de un ejemplo de mi fuente en Firefox & IE (arriba) y Chrome (abajo): Screenshot comparison

Puede ser que sea difícil ver la diferencia en tal una muestra pequeña pantalla, pero cuando esto está sucediendo en toda la página, es muy notable.

A continuación se muestra un ejemplo de cómo estoy usando @ font-face en mi hoja de estilo:

@font-face 
{ 
    font-family: 'MyFont'; 
    src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'), 
     url('../Content/fonts/MyFont.ttf') format('truetype'); 
} 

Otra cosa, posiblemente, vale la pena mencionar, es que cuando me tire hasta el sitio en cualquier navegador que se ejecuta en una máquina virtual , las fuentes son SUPER picadas, mucho peor que el ejemplo de Chrome. Esto sucede cuando uso cualquiera de las computadoras de mi escuela, que están ejecutando escritorios Win7 VMWare. También sucede cuando selecciono el sitio desde una VM con Windows 7 que se ejecuta en la Mac de un amigo.

Answer 1

Este es un problema conocido que los desarrolladores de Chrome están arreglando:

http://code.google.com/p/chromium/issues/detail?id=137692

Para evitar hasta entonces en primer lugar tratar:

html { 
    text-rendering: optimizeLegibility !important; 
    -webkit-font-smoothing: antialiased !important; 
} 

Si esto no funciona para usted, este trabajo en torno trabajó para mí (por encima, no ha determinado las ventanas de Chrome):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

Parece que la reorganización de la regla @ font-face CSS para permitir que svg aparezca 'primero' corrige este problema.

ejemplo:

-before-------------- 

@font-face { 
font-family: 'chunk-webfont'; 
src: url('../../includes/fonts/chunk-webfont.eot'); 
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'), 
url('../../includes/fonts/chunk-webfont.woff') format('woff'), 
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'), 
url('../../includes/fonts/chunk-webfont.svg') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 


-after-------------- 

@font-face { 
font-family: 'chunk-webfont'; 
src: url('../../includes/fonts/chunk-webfont.eot'); 
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'), 
url('../../includes/fonts/chunk-webfont.svg') format('svg'), 
url('../../includes/fonts/chunk-webfont.woff') format('woff'), 
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal; 
} 

Answer 2

Desafortunadamente, todos los navegadores representan las fuentes de forma diferente. Y uno que se ve bien en uno podría tener problemas en otro. No es tan fácil encontrar una buena fuente para el tipo de letra ... si quieres la perfección del píxel deberás usar imágenes.

Pero no todo está perdido, aquí hay 20 fuentes libres (! Gratuitas para uso comercial, incluso) que rinde bastante bien (siempre termino haciendo el registro de esta lista): http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

Recuerde que usted no puede albergar pagado fuentes o los estarías distribuyendo y podrías terminar en problemas.

Answer 3

Es posible que desee jugar con optimizeLegibility: http://aestheticallyloyal.com/public/optimize-legibility/

Y también webkit-font-suavizado: http://maxvoltar.com/archive/-webkit-font-smoothing

También podría ser digno de usar font-ardillas generador de fuente para generar sus fuentes web y CSS para cargar en las fuentes: http://www.fontsquirrel.com/fontface/generator (aunque no estoy seguro de si que solucionará su problema o no)

Answer 4

Para mí, el mejor funcionó:

@font-face { 
    font-family: MyFont; 
    src: url("MyFont.ttf") format('truetype'); 
} 

h1 { 
    font-family: MyFont; 
    -webkit-text-stroke: 0.5pt; 
    -webkit-font-smoothing: antialiased; 
} 

Answer 5

se recomienda usar esto:

-webkit-text-stroke: 0.3pt; 
-webkit-font-smoothing: antialiased; 

Answer 6

intenta agregar -webkit-transform: translateZ (1px); u otra transformación 3d.

explicación:

Chrome tiene otro error - texto borrosa cuando se transforma 3d aplican, por lo que añadir el texto sugerido propiedad desenfocará picado y resolver parcialmente el problema. Todavía está un poco borroso, pero en muchos casos es mejor que uno picado.

ejemplo1 (problema): chopped text. Agregué la rotación aquí para asegurarme de que el texto se corta.
example2 (resuelto): semi-smooth text. La aplicación de la transformación 3D hace que el texto sea borroso, por lo que el texto cortado parece más fluido.

El pequeño problema es que parece que no podemos apuntar solo a las versiones de Windows de Chrome en CSS, por lo que debemos usar JavaScript para aplicar la clase adecuada.

Answer 7

Este problema se resolverá con Chrome 37.

http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html