En mi trabajo toco muchos temas, así que aquí contaré las cosas más relevantes o que puedan ser de interés, habrá cosas del día a día para cualquier usuario y temas algo más especializados para un perfil más técnico

Diseño web

Chrome no muestra mi fuente

Recientemente me he encontrado el problema de que Chrome no muestra mi fuente definida en CSS con fontface, depués de mucho buscar resulta ser un bug de la última actualización 33 y por lo visto se mantiene en la 34, el problema consiste en que la fuente no se visualiza o mejor dicho, Chrome no la renderiza hasta que se fuerza su pintado, bien porque haya algún cambio al pasar el puntero por encima (por ejemplo, en los enlaces), por tanto, para solucionarlo tenemos que forzar un repintado y para ello crearemos una animación con css3 que no será apreciable en absoluto pero que forzará a repintar y así renderizará las fuentes externas definidas en nuestra hoja de estilos.

body
{
    -webkit-animation-duration: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.1s;
}

@-webkit-keyframes fontfix{
    from{ opacity: 1; }
    to{ opacity: 1; }
}

Creamos una animación que llamaremos fontfix que cambia la opacidad de 1 a 1 con lo que visiblemente no hace nada pero soluciona nuestro problema.

La información se puede encontrar en la web del proyecto: https://code.google.com/p/chromium/issues/detail?id=336476&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

2 Comentarios

  1. Jason Tobon

    Excelente!! Por fin pude solucionarlo. Y entonces sucederá el problema de ahora en adelante?
    Muchas gracias.

  2. Comentario del autor

    Pues esperemos que lo solucionen pronto, aunque de momento van dos actualizaciones en las que no.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.