Cufon Schriftwechsel: Wie kann ich den Blitz von unstyled Text zu beseitigen, die beim Laden der Seite auftritt?

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

Frage

Ich bin Cufon unter Verwendung des Gusses ausgewählten Überschrift Elemente auf einer Website ersetzen auf ich arbeite, aber immer, wenn ich eine Seite laden, gibt es einen spürbaren Blitz unstyled Text vor Cufon den Text ersetzt. Ich erwarte, dass ich es falsch machen kann. Hier ist, was ich in der <head> haben: 

<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>

Und hier ist, was ich am Ende meines Dokuments haben: 

<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>

Was mache ich falsch? Vielen Dank im Voraus!

War es hilfreich?

Lösung

Der Browser macht die gesamte Seite (den Standard-Text-Rendering in Ihrem Stylesheet angegeben verwendet wird), dann wird das Cufon Skript geht zurück und ersetzt ihn. Aufgrund der Art und Weise Browser Seiten machen, und die Tatsache, dass das Skripts ausgelöst wird, nachdem die DOMLoaded Ereignis Seite, gibt es keine gute Art und Weise ist das Aufblitzen von ersetzten Text zu vermeiden.

Ich sagte, keinen „guten“ Weg ... es gibt schlechte Möglichkeiten, es zu tun, wie Sie den Text versteckt, das in Ihrem Haupt-Stylesheet mit CSS sein wird ersetzt, aber das ist sehr schlecht für die Zugänglichkeit und / oder Personen, die Skripte haben / Blitzlicht ausgeschaltet.

Zur Zeit dieses Problem ist eine der bekannten Einschränkungen irgendwelcher / script Flash-basierten Textersetzungsverfahren.

Bearbeiten :

Das 24-Wege-Blog hatte einen Artikel über die Verwendung Daten URIs mit der CSS3 @ font-face Erklärung des "Flash Of Unstyled Text" zu vermeiden. Grundsätzlich betten Sie die Schriftdaten direkt in das Stylesheet.

Es ist zwar nicht schön ist, hat es die Schrift bedeutet, mit der CSS geladen und ist sofort einsatzbereit. @ Font-face wird derzeit von Safari und Firefox, unterstützt und wird in Chrome 4 unterstützt werden (die in der Nähe bekommen). IE-Unterstützung beschränkt sich auf Microsofts EOT-Format, so dass ich zähle es als „nicht unterstützt“.

Check it out: So verwenden Daten URIs den Flash Of Unstyled Text

Andere Tipps

Ich dachte, ich würde dies für die nächste Person hinzufügen, die zu diesem Thema eine Antwort suchen ist wie es für mich völlig gelöst, das Problem zu haben scheint. 

.cufon-loading { visibility: hidden; }

Die obige CSS wird den Klartext ausgeblendet, die vor cufon Lasten ersetzt Cufon wird.

die Überschriften Hiding CSS Sichtbarkeit verwenden, ist nicht ratsam, aus oben genannten Gründen. IE8 hat auch ein Problem der cufon Text-Rendering, wenn es versteckt ...

Die Alternative ist, einfach die Überschrift Text aus dem Bildschirm nach links zu bewegen, während er gemacht hat, einen großen negativen ‚text-indent‘ Wert verwendet wird.

  1. Sie müssen die Positionen außerhalb des Bildschirms entweder mit Standard-CSS im Header bewegen, oder wenn Sie sich Sorgen um Text von Menschen versteckt, die nicht über JS aktiviert ist, könnte die CSS mit Jquery eingestellt werden.

    zB. ‚#Id {text-indent: -9999px; }

  2. setzen Sie dann Ihren cufon Ersatzcode kurz vor dem Ende Body-Tag, innerhalb eines Satzes von Script-Tags

  3. einen Aufruf an Cufon.now hinzufügen ();

  4. die jquery css () Methode verwendet, die Überschriften in den Blick bringen, indem ein text-indent von 0 Einstellung

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

EDIT:

Es scheint, den ersten negativen Gedankenstrich muss mit CSS (statt jquery) eingestellt werden, da die Seite vollständig geladen werden muss, bevor der jQuery-Code genannt wird.

Die Gefahr des Einzugs über CSS bei der Einrichtung, ist, dass Menschen, die JS ausgeschaltet haben, werden nicht alle Positionen zu sehen bekommen.

Wenn ich eine vernünftige Lösung finden, werde ich es hier posten.

Sie könnten js verwenden, um eine Stilregel einzufügen, um den cufon'd Text vor dem Körper Belastungen zu verstecken ... 

<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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top