Share
FOUT (un éclair de texte non stylé) est ce que vous verrez souvent à ce bref moment avant qu'un navigateur n'ait eu l'occasion de charger et d'appliquer des polices Web. Typekit et Google Web Fonts nous permettent de contourner ce désagrément. Voici une astuce pour vous expliquer comment.
Le mérite revient à Dan pour cela, après que son récent article m'a rappelé WebFont Loader. C'est tellement utile que je me suis dit qu'il valait la peine de la jeter dans un conseil.
Quel acronyme approprié (en néerlandais cela signifie erreur). Dans tous les cas, lorsque vous utilisez des polices Web, elles doivent être chargées dans votre navigateur sous forme d’actifs (comme les images et les scripts), ce qui peut prendre un moment. Dans ce cas, votre navigateur examinera la pile de polices…
body font-family: 'Oswald', Arial, sans serif;
… Pour déterminer quelle police doit être affichée pendant que la police Web (Oswald dans cet exemple) effectue son voyage. Une fois que la police Web est disponible, il y aura probablement un «flash» car la police de secours disparaîtra et la police voulue prendra la place qui lui revient. Pas idéal.
Le script webfontloader a été basé ensemble par Google et Typekit et est disponible par défaut avec leurs deux services..
Il ajoute des noms de classe à la élément pour refléter le statut des polices Web en cours de chargement. Pendant le chargement, ceci est appliqué:
Plus spécifiquement, des classes sont ajoutées pour chaque police du pipeline (Droid Serif Normal 400 par exemple):
Une fois le processus terminé, ces classes sont mises à jour:
Ou en cas de problème de chargement des actifs:
Ces classes nous offrent une grande flexibilité pour déterminer ce que vit un utilisateur à un moment donné du processus de rendu des polices Web. Construisons maintenant un exemple pour rendre les choses parfaitement claires.
D'accord, j'ai sauté une étape, je suppose que vous avez un document HTML avec lequel travailler. Téléchargez les fichiers sources et vous trouverez un dossier appelé "demo-starting-block". Ouvrez le fichier index.html et vous êtes prêt à partir.
Rendez-vous sur Google Web Fonts et sélectionnez une ou deux polices à utiliser dans votre projet..
Une fois que vous avez cliqué sur «Ajouter à la collection», allez au bas de votre écran et cliquez sur «Utiliser». Vous y trouverez un résumé de votre collection..
Alors que normalement vous pouvez choisir de vous connecter directement au fichier css stocké sur les serveurs gargantuesques de Google, cliquez sur l'onglet JavaScript et copiez le fragment de code qui vous a été fourni..
Google suggère de coller cet extrait en tant que premier élément après l'ouverture tag - et avec une bonne raison. Il est important que ce script permette d'appliquer les noms de classe (dont nous avons parlé plus tôt) dès que possible afin de lutter contre FOUT. Si vous avez tiré ce JavaScript après tout le reste de la page, la police de repli aura eu la chance de se dresser la tête laide…
Voici mon extrait, en toute sécurité où il appartient:
Appliquons notre police Boogaloo à tout le contenu de la page (je ne vais pas chercher des points de style ici). Ouvrez css / styles.css et démarrez avec:
body font-family: 'Boogaloo', cursive;
Toute la police @ font-face jiggery-pokery a été traitée côté serveur par Google - il suffit d'utiliser la valeur fournie.
D'accord, à ce stade, vous verrez l'effet FOUT sur lequel j'ai tant insisté (bien que, certes, * très * brièvement). Si vous voulez le voir plus clairement, essayez d’ajouter des centaines de polices à votre collection, cela devrait ralentir le processus…
Accentsconagua
wf- * Vous pouvez faire toutes sortes de choses sur le contenu de votre page Web pour refléter spécifiquement l'état de chargement des polices. Utilisons un pseudo-élément pour informer les utilisateurs de ce qui se passe.
En continuant dans notre styles.css, ajoutez un pseudo-élément: after à notre code HTML alors qu'il a une classe wf-loading, comme ceci:
.wf-loading: après / * première mise en place, nous devons définir un contenu * / content: "chargement des polices…"; / * donnons maintenant quelques dimensions, une couleur de fond et positionnons-le sur la page * / width: 100%; hauteur: 100%; position: fixe; en haut: 0; gauche: 0; / * ok, alors à quoi voulons-nous que notre étiquette ressemble? * / couleur: # 135040; taille de police: 1.5em; poids de police: gras; hauteur de ligne: 20em; text-align: center;
Nous avons essentiellement couvert la page entière avec une énorme étiquette, les commentaires dans le CSS devraient indiquer clairement ce qui se passe. Voici une capture d'écran de ce que vous pouvez voir pendant le chargement de la police:
Bien sûr, une fois le chargement de la police terminé, les classes de chargement sont supprimées et remplacées par d’autres statuts. le :après pseudo-élément cesse d’être, révélant la page avec votre police Web appliquée. Pas de fout!
L’effet que nous venons d’atteindre fait parfaitement son travail, mais l’étiquette disparaît simplement une fois les polices chargées, révélant de manière abrupte le contenu situé en dessous. Nous pouvons certainement améliorer cela?
Frustrement, les transitions sur le contenu généré sont encore faiblement supportées, nous ne pouvons donc pas nous fier à des astuces. Ce que nous pouvons faire, c’est masquer tout le contenu de la page, en le faisant passer une fois -chargé les cours ont été appliqués.
Essaye ça. Débarrassez-vous de tous les styles que nous venons de créer en plaçant ceci tout en haut de votre fichier css:
.wf-loading * / * Tout d’abord, nous devons tout cacher, mais gardez à l’esprit que cela ne prendra effet que lorsque le script de chargement aura pris effet. Ici, nous cachons tout le contenu de la une fois qu'il a la classe "wf-loading" * / opacity: 0; body font-family: 'Boogaloo', cursive;
Cette petite pépite va se cacher (en réduisant l'opacité à 0) chaque élément à l'intérieur html.wf-loading. C'est la toute première règle, cacher tout avant que FOUT ait lieu.
Avec le contenu caché, nous pouvons appliquer un arrière-plan à notre élément html.
.wf-loading / * voici une image d’arrière-plan (plus de 723 octets) indiquant que quelque chose se passe * / background: url ('… /images/ajax-loader.gif') no-repeat centre center; / * juste pour être sûr que le L'élément partage les mêmes dimensions que la fenêtre du navigateur lors du chargement (et non la page potentiellement allongée) * / height: 100%; débordement caché; Nous avons utilisé un fichier loader.gif généré par l'un des nombreux outils en ligne disponibles. Évidemment, quel que soit le fond que vous choisissez, il devrait être léger. Inutile d'essayer de précharger un fichier de polices de 20 Ko en affichant un graphique de 4 Mo…
Maintenant, si nous chargeons notre page, tout le contenu est caché, à part le html.wf-loading avec son fond chargeur gif. Lorsque la police sera chargée, ce gif disparaîtra.
L'élément html a maintenant été assigné à d'autres classes, alors utilisons-les pour ramener le contenu invisible:
.wf-active *, .wf-inactive * / * ajoute des effets de transition permettant de réintroduire le contenu progressivement une fois les polices chargées * / -webkit-transition: opacité allégée; -moz-transition: l'opacité est atténuée; -o-transition: l'opacité est atténuée; transition: l'opacité s'apaise;
Indépendamment du fait que la police ait été chargée avec succès ou non, nous devrons revoir notre contenu.. wf-chargement libère sa compréhension de l'opacité zéro de tous les éléments de la page, de sorte que nous les réintégrons lentement. Encore une fois, pour ralentir, essayez d'ajouter des charges de polices (ou jouez avec les noms de classe dans l'inspecteur d'éléments de votre navigateur.) également stocké, de sorte que chaque fois que vous le testez, vous devrez peut-être vider le cache de votre navigateur.
Simple mais efficace. Mon type de conseil préféré. Et les possibilités sont infinies - comment suggéreriez-vous d’utiliser le wf- * Des classes?
Enfin, je n'ai pas pu résister à ce préchargement de Kontramax par dribbble. C’est un peu lourd pour nos besoins, mais c’est quoi!
