Tipografias en Google Chrome se leen fatal

[Mizunga]

Hola a todos.

He buscado información al respecto y aunque he leído que es un fallo de Google Chrome (en algunos sitios he leído que era tema del sistema operativo) los temas son antiguos (algunos de 2008 incluso), por eso paso a preguntar.

Estoy diseñando una WEB y estoy teniendo problemas con google chrome, sobretodo con las tipografías que aunque se leen se ven horribles y no resulta nada agradable leer un artículo tal y como se muestran.

Otro fallo es que al posicionar una imagen que empleo de fondo en google chrome se ve 1 pixel movida de sitio, cosa que puedo solucionar retocando la imagen pero me gustaria saber si esto guarda algún tipo de relación.

Actualmente estoy utilizando HTML5, ningún estilo CSS3 y un buen css-reset.

Cualquier ayuda me seria de ayuda, gracias.

[danneg]

Bueno, para empesar te escribiré un reset que uso de toda la vida y no me ha causado problemas; esto deberá resolver el problema del pixel en blanco.

Código CSS:

* {
    margin: 0;
    padding: 0;
}
 

Respecto a tus fuentes, el principal fallo es el sistema operativo, ya que si miras tu sitio desde un chrome en Mac, estas se verán bien.

Muchas veces tambien esto depende de la tipografía que uses, el formato y el metodo que utilices. Yo te recomiendo utilizar diferentes tipos de fuentes a la vez, sería un codigo similar a este:

Código CSS:

@font-face {
    font-family: "Fuente";
    src:    url("../includes/fuente.eot")   format("eot"),
        url("../includes/fuente.ttf")   format("truetype"),
        url("../includes/fuente.woff")  format("woff"),
        url("../includes/fuente.svg#fuente")    format("svg");
}
 

Viene ordenado desde lo mas arcaico hasta lo mas actual y bonito (eot para IE, ttf para los no soporten otras fuentes, woff para los navegadores mas potentes, svg para los que soporten reenderizado de vetores como el safari y algunas versiones moviles).

[Mizunga]

Hola Danneg, gracias por responder tan rápido.

El problema de la imagen no era tema del reset, era una tontería que ya he solucionado (la estaba posicionando pixel a pixel y no solo se veía mal en diferentes navegadores, también cambiaba en diferentes resoluciones.

La tipografía he intentado lo que dices y no funciona. Las fuentes que empleo son de Google Fonts, aunque también uso San-serif y serif y ambas se ven de pena también. Francamente no se que es.

Gracias por tu ayuda. Voy a ver si alguien más responde o encuentro algo por allí y lo pongo.

[kseso?]

Actualmente estoy utilizando HTML5, ningún estilo CSS3 y un buen css-reset.

Esa afirmación casi me hace pasar del tema. Pero creo que debe ser error de expresión.

Dejándola a un lado, debería pedir el traslado al foro de css. Es donde le corresponde estar.

Cienmonos en la consulta, digo, centrémonos en ella.

Mizunga
Un poco más de información estaría bien y ayudaría a dar respuestas concretas a su caso. Un enlace y en su defecto y/o como complemento los códigos y una imagen acompañando a una descripción más objetiva y descriptiva del "se leen se ven horribles y no resulta nada agradable leer un artículo tal y como se muestran".
Tampoco menciona SO. en este caso es un dato relevante ni la tipografía y sus propiedades: tamaño, estilo... Y es un dato muy determinante.

Los navegadores basados en webkit tienen algunas carencias o "comportamientos particulares" con el tratamiento que hacen de los textos. No se si será por el tema del antialiased y subpixel-antialiased. Es un tema que desconozco.

Lo que puede intentar es hacer uso de algunas propiedades privativas para ver si logra mejorar algo esa visión:

Código CSS:

-webkit-text-stroke
-webkit-font-smoothing
 

Si fuese necesario esta tarde buscaría algo más de información sobre ellas y alguna más que quizás pueda complementarlas.
Lo que si hago es adjuntar una imagen (chrome en vi$ta) con el uso de ellas:


Pero tenga en cuenta que no todas las tipografías renderizan igual, y que el cómo se muestren depende mucho del tamaño (fon-size) declarado y el rango óptimo para el que fueron diseñadas.