Reemplazo de fuente Cufon:¿Cómo puedo eliminar el destello de texto sin estilo que ocurre cuando se carga la página?

StackOverflow https://stackoverflow.com/questions/1884145

Pregunta

Estoy usando Cufon para reemplazar la fuente de los elementos de encabezado seleccionados en un sitio en el que estoy trabajando, pero cada vez que cargo una página, hay un destello notable de texto sin estilo antes de que Cufon reemplace el texto.Supongo que lo estoy haciendo mal.Esto es lo que tengo en el <head>:

<script src="/js/Monotype_Corsiva_italic_400.font.js"></script>
<script src="/js/PalatinoBoldum_700.font.js"></script>
<script>
Cufon.replace('header h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('header h2', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('aside h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('#site-info h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('abbr[title="My Abbreviation"]', { fontFamily: 'PalatinoBoldum' });
</script>

Y esto es lo que tengo al final de mi documento:

<script>
// !Cufon: replace the fonts
// --------------------------------------------
Cufon.now();
// !Track & analyze stats
// --------------------------------------------
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
// Google analytics stuff...
</script> <!-- EO Tracking -->
</body>
</html>

¿Qué estoy haciendo mal?¡Gracias de antemano!

¿Fue útil?

Solución

El navegador muestra la página completa (utilizando la representación de texto estándar especificada en su hoja de estilo), luego el script Cufon regresa y la reemplaza.Debido a la forma en que los navegadores representan las páginas y al hecho de que el script se activa después del evento DOMLoaded de la página, no existe una buena manera de evitar el destello momentáneo de texto no reemplazado.

Dije que no hay una "buena" manera...Hay malas maneras de hacerlo, como ocultar el texto que va a ser reemplazado con CSS en su hoja de estilo principal, pero eso es muy malo para la accesibilidad y/o para las personas que tienen scripts/flash desactivados.

Actualmente, este problema es una de las limitaciones conocidas de cualquier técnica de sustitución de texto basada en script/flash.

EDITAR:

El blog de 24 maneras tenía un artículo sobre el uso de URI de datos con la declaración CSS3 @font-face para evitar el "Destello de texto sin estilo".Básicamente, incrustas los datos de la fuente directamente en la hoja de estilo.

Si bien no es bonito, significa que la fuente está cargada con CSS y está lista para usar de inmediato.@font-face actualmente es compatible con Safari y Firefox, y será compatible con Chrome 4 (que se está acercando).La compatibilidad con IE está limitada al formato EOT de Microsoft, por lo que lo cuento como "no compatible".

Échale un vistazo: Cómo utilizar URI de datos para evitar el destello de texto sin estilo

Otros consejos

que me gustaría añadir esto para la siguiente persona que esté buscando una respuesta a este problema ya que parece haber resuelto por completo el problema para mí. 

.cufon-loading { visibility: hidden; }

El CSS por encima de ocultará el texto sin formato que Cufón está reemplazando antes de cargas Cufon.

Cómo ocultar los encabezados utilizando CSS visibilidad no es recomendable por las razones mencionadas anteriormente. IE8 también tiene un problema haciendo que el texto Cufon cuando está oculta ...

La alternativa es simplemente mover el texto de la partida fuera a la izquierda de la pantalla mientras se rindió, utilizando un gran 'guión-texto' valor negativo.

  1. Es necesario mover las partidas fuera de la pantalla utilizando el estándar CSS dentro de la cabecera, o si usted está preocupado acerca de cómo ocultar el texto de las personas que no tienen JS habilitado, el CSS se podría establecer usando jQuery.

    por ejemplo. '#Id {text-indent: -9999px; } '

  2. A continuación, coloque el código de reemplazo Cufon justo antes de la etiqueta del cuerpo final, dentro de un conjunto de etiquetas de script

  3. Añadir una llamada a Cufon.now ();

  4. Utilizando el método jquery .css (), llevar los encabezados de nuevo a la vista mediante el establecimiento de un texto-guión de 0

    por ejemplo. $ ( '# Id') css ( 'texto-guión', '0').;

EDIT:

Parece que la sangría negativa inicial, se debe establecer con CSS (en lugar de jQuery) porque la página tiene que estar totalmente cargada antes del código de jQuery se llama.

El peligro en la fijación del guión a través de CSS, es que las personas que tienen JS desactivado, no se llega a ver las partidas en absoluto.

Si encuentro una solución razonable, voy a publicar aquí.

Se puede usar JS para insertar una regla de estilo para ocultar el texto cufon'd antes de la carga del cuerpo ... 

<html>
  <head> ... </head>
  <body>
    <script> // put this at the beginning of the body

      (function(){
        var i = document.styleSheets.length,
            s = document.createElement('style');
        document.head.appendChild(s);
        document.styleSheets[i].addRule(
          'h1,h2,h3,h4,h5,h6',
          'text-indent:-9999px'
        );
      }());

    </script>

    ...

  </body>
</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top