Share
FOUT (Flash of Unstyled Text) ist das, was Sie in diesem kurzen Moment oft sehen werden, bevor ein Browser Web-Fonts laden und anwenden konnte. Typekit und Google Web Fonts bieten uns einen Weg, um diese Unannehmlichkeiten zu umgehen. Hier ist ein kurzer Tipp, um genau zu erklären, wie.
Dank geht an Dan, nachdem sein letzter Artikel mich an den WebFont Loader erinnerte. Es ist so nützlich, dass ich dachte, es lohnt sich, in ein schnelles Trinkgeld zu werfen.
Was für ein passendes Akronym (auf Niederländisch bedeutet Fehler). Wenn Sie Webfonts verwenden, müssen diese in jedem Fall als Assets (wie Bilder und Skripts) in Ihren Browser geladen werden, was einen Moment dauern kann. In diesem Fall wird Ihr Browser den Schriftstapel betrachten.
body Schriftfamilie: 'Oswald', Arial, serifenlos;
… Um festzustellen, welche Schriftart angezeigt werden soll, während die Webschriftart (in diesem Beispiel Oswald) ihre Reise unternimmt. Sobald die Web-Schriftart verfügbar ist, wird wahrscheinlich ein "Flash" angezeigt, wenn die Fallback-Schriftart verschwindet und die beabsichtigte Schriftart ihren rechtmäßigen Platz einnimmt. Nicht ideal.
Das Webfontloader-Skript wurde von Google und Typekit zusammengestellt und ist standardmäßig für beide Dienste verfügbar.
Es fügt der Klasse Klassennamen hinzu Element, um den Status aller geladenen Webfonts anzuzeigen. Während des Ladens wird dies angewendet:
Genauer gesagt werden Klassen für jede Schriftart in der Pipeline hinzugefügt (z. B. Droid Serif Normal 400):
Sobald der Prozess abgeschlossen ist, werden diese Klassen aktualisiert:
Oder bei einem Problem beim Laden der Assets:
Diese Klassen geben uns große Flexibilität bei der Bestimmung, was ein Benutzer zu einem bestimmten Zeitpunkt im Web-Font-Rendering-Prozess erlebt. Lassen Sie uns nun ein Beispiel erstellen, um die Dinge vollkommen klar zu machen.
Okay, ich habe einen Schritt übersprungen, ich gehe davon aus, dass Sie ein HTML-Dokument haben, mit dem Sie arbeiten können. Laden Sie die Quelldateien herunter und Sie finden einen Ordner mit dem Namen "Demo-Startblock". Öffne die index.html darin und du kannst loslegen.
Wechseln Sie zu Google Web Fonts und wählen Sie eine oder zwei Schriftarten aus, die in Ihrem Projekt verwendet werden sollen.
Wenn Sie auf "Zur Sammlung hinzufügen" geklickt haben, gehen Sie zum unteren Rand Ihres Bildschirms und klicken Sie auf "Verwenden". Dort wird eine Zusammenfassung Ihrer Sammlung angezeigt.
Normalerweise können Sie die Css-Datei, die auf den riesigen Servern von Google gespeichert ist, direkt verlinken. Klicken Sie auf die Registerkarte "JavaScript", und kopieren Sie das von Ihnen angegebene Snippet.
Google schlägt vor, dass Sie dieses Snippet als erstes Element nach dem Öffnen einfügen tag - und das aus gutem Grund. Es ist wichtig, dass dieses Skript die Klassennamen so schnell wie möglich anwenden kann (wir haben früher darüber gesprochen), um FOUT zu bekämpfen. Wenn Sie dieses JavaScript nach allem anderen auf der Seite eingezogen haben, hat die Fallback-Schriftart die Möglichkeit erhalten, ihren hässlichen Kopf zu heben ...
Hier ist mein Ausschnitt, wo es hingehört:
Wenden wir unsere Boogaloo-Schriftart auf alles auf der Seite an (ich möchte hier keine Stilpunkte setzen). Öffnen Sie css / styles.css und legen Sie los mit:
body font-family: 'Boogaloo', kursiv;
Alle eigentlichen @ font-face-Jiggery-Pokery wurden von Google serverseitig behandelt - wir müssen nur den angegebenen Wert verwenden.
Okay, an diesem Punkt sehen Sie den FOUT-Effekt, den ich ungefähr so oft angestoßen habe (allerdings zugegebenermaßen * sehr * kurz). Wenn Sie es genauer sehen möchten, fügen Sie Ihrer Sammlung Hunderte von Schriftarten hinzu. Das sollte die Dinge verlangsamen.
Accentsconagua
wf- * Es gibt verschiedene Möglichkeiten, den Inhalt Ihrer Webseite zu ändern, um den Ladestatus der Schriftarten besonders darzustellen. Verwenden wir ein Pseudo-Element, um die Benutzer darüber zu informieren, was los ist.
Fügen Sie in unserer styles.css fort und fügen Sie unserem HTML-Element ein: after-Pseudoelement hinzu, während es eine wf-loading-Klasse hat.
.wf-loading: Nach / * first up müssen wir einige Inhalte definieren * / content: "Schriftarten laden ..."; / * lass uns nun einige Abmessungen und eine Hintergrundfarbe geben und auf der Seite positionieren * / width: 100%; Höhe: 100%; Position: feststehend; oben: 0; links: 0; / * okay, wie wollen wir, dass unser Label tatsächlich aussieht? * / color: # 135040; Schriftgröße: 1.5em; Schriftdicke: fett; Zeilenhöhe: 20em; Text ausrichten: Mitte;
Wir haben die gesamte Seite mit einem großen Label versehen. Die Kommentare im CSS sollten deutlich machen, was los ist. Hier ist ein Screenshot von dem, was Sie sehen können, während die Schriftart geladen wird:
Nachdem die Schriftart vollständig geladen wurde, werden die Ladeklassen natürlich entfernt und durch andere Status ersetzt. Das :nach dem Das Pseudoelement ist nicht mehr vorhanden und zeigt die Seite mit der verwendeten Webschriftart an. Kein FOUT!
Der Effekt, den wir gerade erzielt haben, erfüllt seine Aufgabe perfekt, aber das Etikett verschwindet einfach, sobald die Schriftarten geladen werden, und der Inhalt wird abrupt angezeigt. Wir können das sicherlich verbessern?
Frustrierend werden Übergänge bei generierten Inhalten immer noch schwach unterstützt, sodass wir uns hier nicht auf Tricks verlassen können. Was wir tun können, ist, den gesamten Seiteninhalt auszublenden und ihn einmal in die -geladen Klassen wurden angewendet.
Versuche dies. Entfernen Sie alle gerade erstellten Stile und platzieren Sie diese ganz oben in Ihrer CSS-Datei:
.wf-loading * / * Als Erstes müssen wir alles ausblenden, bedenken Sie jedoch, dass dies erst wirksam wird, wenn das Ladeskript wirksam geworden ist. Hier verstecken wir alle Inhalte innerhalb der sobald es die Klasse "wf-loading" hat * / opacity: 0; body font-family: 'Boogaloo', kursiv;
Dieses kleine Nugget wird sich verstecken (durch Reduzierung der Deckkraft auf 0) jeden Element innerhalb html.wf-loading. Es ist die allererste Regel, dass alles versteckt wird, bevor FOUT stattfindet.
Wenn der Inhalt ausgeblendet ist, können wir unserem html-Element einen Hintergrund zuweisen.
.wf-loading / * Hier ist ein Hintergrundbild (mindestens 723 Bytes), um anzuzeigen, dass etwas passiert * / background: url ('… /images/ajax-loader.gif') no-repeat center center; / * Nur um sicher zu gehen, dass Das Element hat beim Laden die gleichen Abmessungen wie das Browserfenster (und nicht die möglicherweise verlängerte Seite) * / height: 100%; Überlauf versteckt; Wir haben ein loader.gif verwendet, das von einem der vielen verfügbaren Online-Tools generiert wurde. Unabhängig vom gewählten Hintergrund sollte es leichtgewichtig sein. Es ist sinnlos, eine Zeichensatzdatei mit einer Größe von 20 KB vorab zu laden, indem eine Grafik von 4 MB angezeigt wird.
Wenn wir nun unsere Seite laden, wird der gesamte Inhalt außer dem eingeblendet html.wf-loading mit seinem Loader-GIF-Hintergrund. Wenn die Schrift geladen wird, verschwindet das GIF.
Dem html-Element wurden jetzt andere Klassen zugewiesen. Verwenden Sie diese, um den unsichtbaren Inhalt wieder herzustellen:
.wf-active *, .wf-inactive * / * fügt einige Übergangseffekte hinzu, um den Inhalt nach dem Laden der Zeichensätze schrittweise wieder einzuführen. -Moz-Übergang: Opazität 1s-Lockerung; -o-Übergang: Deckkraft wird erleichtert; Übergang: Deckkraft wird gemildert;
Unabhängig davon, ob die Schrift erfolgreich oder nicht erfolgreich geladen wurde, müssen wir unseren Inhalt erneut sehen. WF-Laden gibt den Griff für die Null-Deckkraft aller Elemente auf der Seite frei, also wechseln wir sie langsam wieder zurück. Um die Abläufe zu verlangsamen, versuchen Sie, eine Vielzahl von Schriftarten hinzuzufügen (oder spielen Sie mit den Klassennamen im Elementinspektor Ihres Browsers.) Schriftarten sind auch gespeichert, so dass Sie bei jedem Test den Cache Ihres Browsers leeren müssen.
Einfach und doch effektiv. Mein Lieblingstipp. Und die Möglichkeiten sind grenzenlos - wie würden Sie die Verwendung von wf- * Klassen?
Zu guter Letzt konnte ich diesem Preloader von Kontramax auf Dribbble nicht widerstehen. Es ist ein bisschen schwer für unsere Zwecke, aber was soll's?!
