Cufon substituição de fontes: Como posso eliminar o brilho de texto sem estilo que ocorre quando a página é carregada?

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

Pergunta

Eu estou usando Cufon para substituir a fonte de elementos cabeçalho selecionado em um site que eu estou trabalhando, mas sempre que eu carregar uma página, há um flash visível do texto sem estilo antes Cufon substitui o texto. Espero que eu possa estar fazendo isso errado. Aqui está o que eu tenho no <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>

E aqui está o que eu tenho no final do meu 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>

O que estou fazendo de errado? Agradecemos antecipadamente!

Foi útil?

Solução

O navegador renderiza a página inteira (usando a renderização de texto padrão especificado na sua folha de estilo), então o script Cufon volta e substitui-lo. Devido à forma como navegadores processar páginas, eo fato de que os fogos de script após o evento DOMLoaded da página, não há nenhuma boa maneira de evitar o flash momentâneo de texto não substituída.

Eu disse nenhuma maneira "bom" ... existem maus maneiras de fazer isso, como esconder o texto que vai ser substituído com CSS em sua folha de estilo principal, mas isso é muito ruim para acessibilidade e / ou pessoas que têm roteiros / flash desligado.

Atualmente este problema é uma das limitações conhecidas de quaisquer técnicas de substituição de texto de script / baseados em flash.

Editar :

A 24 maneiras blogue tinha um artigo sobre o uso de dados URIs com o CSS3 @ declaração font-face para evitar o "Flash do texto sem estilo". Basicamente, você incorporar os dados da fonte diretamente na folha de estilo.

Enquanto não é bonito, isso não significa que a fonte é carregado com o CSS e está pronto para uso imediato. @ Font-face é suportado pelo Safari e Firefox, e será suportado no Chrome 4 (que está chegando perto). apoio IE é limitado para o formato EOT da Microsoft, então eu contá-lo como "não suportado".

Confira: como usar os dados URIs para evitar o brilho de texto sem estilo

Outras dicas

pensei que eu iria adicionar isso para a próxima pessoa que está à procura de uma resposta para esta questão como parece ter resolvido completamente o problema para mim. 

.cufon-loading { visibility: hidden; }

O CSS acima vai esconder o texto simples que Cufon está substituindo antes de cargas Cufon.

Escondendo os títulos usando visibilidade CSS não é aconselhável, por motivos mencionados acima. IE8 também tem um problema de renderização de texto Cufon quando ele está escondido ...

A alternativa é mover simplesmente o texto do título para a esquerda da tela, enquanto ele é processado, usando um grande valor negativo 'text-indent'.

  1. Você precisa mover os cabeçalhos fora da tela usando CSS seja padrão no cabeçalho, ou se você está preocupado com o texto esconderijo de pessoas que não têm JS habilitado, o CSS pode ser definido usando jquery.

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

  2. Em seguida, coloque o seu código de substituição Cufon pouco antes da tag body fim, dentro de um conjunto de tags de script

  3. Adicionar uma chamada para Cufon.now ();

  4. Usando o método jquery css (), trazer os títulos de volta à vista, definindo um text-indent de 0

    por exemplo. $ ( '# Id') css ( 'text-indent', '0.');

EDIT:

Parece que o travessão inicial negativo, deve ser definida com CSS (em vez de jquery) porque as necessidades de página para ser completamente carregado antes do código jQuery é chamado.

O perigo na definição do travessão via CSS, é que as pessoas que têm JS desligado, não vai conseguir ver os títulos em tudo.

Se eu encontrar uma solução razoável, eu vou postá-lo aqui.

Você pode usar js para inserir uma regra de estilo para ocultar o texto cufon'd antes do carregamento do corpo ... 

<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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top