remplacement de la police CUFON: Comment puis-je éliminer le flash du texte sans style qui se produit lorsque la page se charge?

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

Question

J'utilise Cufon pour remplacer la police des éléments de titre sélectionnés sur un site, je travaille, mais chaque fois que je charge une page, il y a un flash notable du texte avant Cufon remplace sans style le texte. Je pense que je sois en train de faire fausse route. Voici ce que j'ai dans le <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>

Et voici ce que j'ai à la fin de mon document: 

<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'est-ce que je fais mal? Merci d'avance!

Était-ce utile?

La solution

Le navigateur affiche la page entière (en utilisant le rendu de texte standard spécifié dans votre feuille de style), le script Cufon retourne et le remplace. En raison de la façon de rendre les pages des navigateurs, et le fait que les feux de script après l'événement DOMLoaded de la page, il n'y a pas de bonne façon d'éviter le flash momentané du texte non remplacé.

J'ai dit non « bonne » ... il y a de mauvaises façons de le faire, comme se cachant le texte qui va être remplacé par CSS dans votre feuille de style principale, mais est très mauvais pour l'accessibilité et / ou les personnes qui ont des scripts / flash désactivé.

À l'heure actuelle ce problème est l'une des limites connues de toutes les techniques de remplacement texte script / base de mémoire flash.

EDIT :

Les 24 façons le blog a publié un article sur l'utilisation des données URIs avec le CSS3 @ déclaration font-face pour éviter le « Flash de texte sans style ». Fondamentalement, vous intégrez les données de police directement dans la feuille de style.

Bien que ce n'est pas assez, cela ne signifie que la police est chargée avec le CSS et est prêt à être utilisé immédiatement. @ Font-face est actuellement pris en charge par Safari et Firefox, et sera pris en charge dans Chrome 4 (qui se rapproche). soutien IE est limité au format EOT de Microsoft, donc je compte comme « non disponible ».

Check it out: Comment utiliser les données URIs pour éviter Flash de texte sans style

Autres conseils

Je pensais que je voudrais ajouter ceci pour la prochaine personne qui cherche une réponse à cette question car il semble avoir complètement résolu le problème pour moi. 

.cufon-loading { visibility: hidden; }

Le CSS ci-dessus cachera le texte brut qui CUFON remplace avant charges CUFON.

Hiding les rubriques en utilisant la visibilité CSS n'est pas conseillé pour les raisons mentionnées ci-dessus. IE8 a également un problème qui rend le texte CUFON quand il est caché ...

L'alternative consiste à déplacer simplement le libellé de la position vers la gauche de l'écran alors qu'il est rendu, en utilisant une grande valeur « text-indent » négatif.

  1. Vous devez déplacer les rubriques hors écran à l'aide soit CSS standard au sein de l'en-tête, ou si vous êtes inquiet au sujet du texte caché des gens qui n'ont pas JS activé, le CSS pourrait être définie à l'aide jquery.

    par exemple. « #Id {text-indent: -9999px; }

  2. Ensuite, placez votre code de remplacement CUFON juste avant la balise de corps d'extrémité, dans un ensemble de balises de script

  3. Ajouter un appel à Cufon.now ();

  4. En utilisant la méthode Css jquery (), mettre les titres en vue de nouveau en définissant un texte tiret 0

    par exemple. $ ( '# Id') css ( 'text-indent', '0').

EDIT:

Il semble que le retrait négatif initial, doit être réglé avec CSS (plutôt que jquery) parce que la page doit être entièrement chargée avant le code jquery est appelé.

Le danger à mettre le tiret via CSS, est que les gens qui ont JS désactivé, ne se voir les rubriques du tout.

Si je trouve une solution raisonnable, je posterai ici.

Vous pouvez utiliser js pour insérer une règle de style pour cacher le texte cufon'd avant le chargement du corps ... 

<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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top