css - @ font-face para fuentes personalizadas, las fuentes no son fluidas en Chrome

google-chrome css3

Question

Tengo una aplicación web que utiliza @ font-face de CSS3 para incrustar fuentes personalizadas. Hasta ahora esto ha funcionado perfectamente en IE y Firefox.

Sin embargo, con Chrome, las fuentes personalizadas aparecen pixeladas y no son suaves. A continuación se muestra un enlace a un fragmento de pantalla de un ejemplo de mi fuente en Firefox e IE (arriba) y Chrome (abajo): comparación de capturas de pantalla

Puede ser difícil ver la diferencia en una captura de pantalla de muestra tan pequeña, pero cuando esto sucede en toda la página es muy notable.

A continuación se muestra un ejemplo de cómo uso @ font-face en mi hoja de estilos:

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

Otra cosa que posiblemente vale la pena mencionar es que cuando abro el sitio en CUALQUIER navegador que se ejecuta en una máquina virtual, las fuentes son SUPER entrecortadas, mucho peor que el ejemplo de Chrome. Esto sucede cuando uso cualquiera de las computadoras de mi escuela, que ejecutan computadoras de escritorio Win7 VMWare. También sucede cuando arranco el sitio desde una máquina virtual Windows 7 que se ejecuta en la Mac de un amigo.

Answer 1

Desafortunadamente, todos los navegadores renderizan las fuentes de manera diferente. Y uno que se ve bien en uno puede tener problemas en otro. No es tan fácil encontrar una buena fuente para el tipo de letra ... si quieres la perfección de píxeles, tendrás que usar imágenes.

Pero no todo está perdido, aquí hay 20 fuentes gratuitas (¡incluso gratis para uso comercial) que se reproducen bastante bien (siempre termino revisando esta lista): http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

Recuerde que no puede alojar fuentes pagas o las estaría distribuyendo y podría terminar en problemas.

Answer 2

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

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

También podría valer la pena usar el generador de fuentes de fuentes de ardillas para generar sus fuentes web y css para cargar las fuentes: http://www.fontsquirrel.com/fontface/generator (aunque no estoy seguro de si eso solucionará su problema o no)

Answer 3

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

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

Para trabajar hasta entonces primero intente:

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

Si esto no funciona para usted, esta solución temporal funcionó para mí (arriba no corrigió Windows Chrome):

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

aparece reorganizando la regla de @ font-face CSS para permitir que svg aparezca "primero" soluciona 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 4

Este problema se resolverá con Chrome 37.

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

Answer 5

Intente agregar -webkit-transform: translateZ (1px); u otra transformada 3d.

explicación:

Chrome tiene otro error: texto borroso cuando se aplican transformaciones 3d, por lo que agregar propiedades sugeridas borrará el texto cortado y resolverá parcialmente el problema. Todavía está un poco borroso, pero en muchos casos es mejor que uno picado.

example1 (problema): texto cortado . He añadido rotación aquí para estar seguro de que el texto se corta.
Ejemplo2 (resuelto): texto semi-liso . La aplicación de la transformación 3d hace que el texto sea borroso, por lo que el texto cortado parece más suave.

El pequeño problema es que parece que no podemos apuntar solo a las versiones de Windows de Chrome en CSS, así que tenemos que usar javascript para aplicar la clase apropiada.

Answer 6

Para mí, 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 7

Sugeriría usar esto:

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