¿Por qué están pixelados mis Google Web Fonts?

Estoy tratando de usar las fuentes de Google en un sitio web simple. La etiqueta que estoy usando es¿Por qué están pixelados mis Google Web Fonts?

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' >

la CSS es

body { 

    padding: 0; 
    text-align: center; 

    line-height: 180%; 

    background: #1a2426; 
    color: #f7f7f7; 

    font-family: 'Lobster', serif; 

}

El problema es que la fuente se ve pixelada cuando me tire hacia arriba en Chrome. Me preguntaba si alguien podría explicar por qué?

Ejemplo

Fuente

2012-02-14 jamesamuir

¿Qué Chrome estás usando? [Este] (http://jsfiddle.net/kvPg6/) se ve bien en Chrome 16 para Linux. – fncomp

Windows XP Chrome 16.0.912.77, aunque se ve igual de mal en Firefox y IE – jamesamuir

http://jsfiddle.net/LSHw7/ funciona bien en Chrome 17 para Mac – sandeep

No es un problema del navegador que es un problema de las ventanas.

Marque esta https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-font-are-you-using-that-are

Fuente

2012-02-14 05:29:27 sandeep

que era correcto. Resultó que tenía Cleartype apagado en XP. ¡Muchas gracias! – jamesamuir

Parece ser que el equipo de desarrollo de Chrome is aware de este tema. Es considerado por ellos como un error en el que están trabajando.

La mejor solución que he encontrado es no hacer ninguno de los hacks CSS recomendados (tener una ligera sombra, etc.) pero reorganizar la pila de fuentes para que la versión .svg cargue primero ya que Chrome no es totalmente compatible Fuentes TrueType aún.

Por ejemplo:

@font-face { 
font-family: ‘MyWebFont’; 
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), 
    url(‘webfont.svg#svgFontName’) format(‘svg’), 
    url(‘webfont.woff’) format(‘woff’), 
    url(‘webfont.ttf’) format(‘truetype’); 
}

Salida this article para más información.

Puede organizar el orden de carga de la fuente. solo tiene que entender que al llamar a http://fonts.googleapis.com/css?family=Lobster 'rel =' stylesheet 'type =' text/css '> está trayendo una hoja de estilo externa que dice:

/* latin */ 
@font-face { 
    font-family: 'Lobster'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v11/G6-OYdAAwU5fSlE7MlBvhVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
}

con solo incluir esa llamada directamente en sus hojas de estilo, tiene control sobre la carga de la orden.

Fuente

2013-02-15 23:30:47 Gray

Acabo de encontrar esto - funciona a la perfección, gracias! – wickywills

La pregunta era sobre la fuente Google, no @ font-face. Tengo el mismo problema pero no puedes organizar la carga de la fuente como dices, ¿o sí? – Georgio

¿Por qué están pixelados mis Google Web Fonts?

Respuesta

Cuestiones relacionadas