D'attente pour les polices de chargement avant le rendu de la page web
Je suis de l'utilisation de @font-face pour incorporer des polices dans mon site web. D'abord le texte rend le système par défaut, et ensuite (une fois que le fichier de police a chargé sans doute) que la police rend une fraction de seconde plus tard. Est-il un moyen de minimiser ou à se débarrasser de ce délai, en retardant le rendu de la page jusqu'à ce que après les polices ont chargé ou similaire.
- La mise en cache des polices serait de travailler.
- Gardez à l'esprit que c'est un bon moyen pour faire de votre site web semble très lente, car les utilisateurs sur une liaison sans fil peut prendre un certain temps à charger les polices web. De nombreux utilisateurs il suffit de frapper le bouton de retour, si le texte ne s'affiche pas dans quelques secondes.
Vous devez vous connecter pour publier un commentaire.
C'est la façon dont le navigateur se comporte.
Tout d'abord où est votre @police a déclaré? Est-il en ligne pour votre HTML, a déclaré dans une feuille CSS sur la page, ou de (espérons-le) a déclaré dans une feuille CSS externe?
Si elle n'est pas externe dans une feuille, essayez de le déplacer à un (c'est une meilleure pratique de toute façon en général).
Si cela ne vous aide pas, vous devez vous poser est la fraction de seconde de différence vraiment significative de nuire à l'expérience utilisateur? Si c'est le cas, envisager de JavaScript, il ya quelques choses que vous pourriez être en mesure de le faire, les redirections, les pauses, etc, mais ceux-ci pourraient en fait être pire que le problème d'origine. Pire pour les utilisateurs, et pour le pire à maintenir.
Ce lien peut aider:
http://paulirish.com/2009/fighting-the-font-face-fout/
Edit: La meilleure approche est probablement à base64 encode vos polices. Cela signifie que votre police doit être chargé entièrement avant que l'HTML est analysé et affiché. Vous pouvez le faire avec la police écureuil webfont générateur https://www.fontsquirrel.com/tools/webfont-generator en cliquant sur "Expert" puis "base64 encode". C'est la façon dont les services comme TypeKit de travail.
Réponse originale à cette question:
Une autre façon de détecter si les polices sont chargés serait à l'aide de FontLoader https://github.com/smnh/FontLoader ou en copiant leur stratégie.
Ils se lient à l'événement scroll dans le navigateur, parce que quand la police charge redimensionner le texte. Il utilise deux contenant des divs (qui va défiler lorsque la hauteur) et un autre de secours pour IE.
Une alternative est de vérifier les DOM périodiquement avec
setInterval
, mais à l'aide de javascript événements est beaucoup plus rapide et de qualité supérieure.Évidemment, vous pourriez faire quelque chose comme régler l'opacité du corps à 0, puis l'afficher dans une fois que la police charge.
Joni Korpi a un bel article sur le chargement des polices avant le reste de la page.
http://jonikorpi.com/a-smoother-page-load/
Il utilise également un loading.gif pour atténuer le retard de sorte que les utilisateurs ne seront pas frustrés.
Seulement IE charge en premier la police, puis le reste de la page.
Les autres navigateurs charge choses en même temps pour une raison. Imaginez qu'il y ait un problème avec le serveur d'hébergement de la police ou avec le téléchargement des polices.
Vous pourrez accrocher l'ensemble de votre site jusqu'à ce que la police est chargée. À mon avis, un flash de texte non stylé est mieux que de ne pas voir le site à tous les
flash of unstyled text
causes de vos utilisateurs à penser que vous avez été (le créateur) pas un professionnel dans votre travail et il y a une faute dans l'application. Ce UX est l'homme.Utilisation https://github.com/typekit/webfontloader
et vérifier les événements dans la configuration
https://github.com/typekit/webfontloader#configuration
Vous pouvez utiliser CSS font-affichage à l'intérieur de votre @font-face.
Les mots clés pour toutes les valeurs disponibles sont:
Giulio Mainardi a écrit un bel article à propos de chacun d'eux, et que vous devez utiliser lorsque sur sitepoint.
Vous pouvez le lire ici: https://www.sitepoint.com/css-font-display-future-font-rendering-web/?utm_source=frontendfocus&utm_medium=email
Puisque personne n'a mentionné que, je crois que cette question a besoin d'une mise à jour. La façon dont j'ai réussi à résoudre le problème a l'aide de la "précharger" option pris en charge par les navigateurs modernes.
Au cas où quelqu'un n'a pas besoin de support des vieux navigateurs.
quelques liens utiles avec plus de détails:
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
http://www.bramstein.com/writing/preload-hints-for-web-fonts.html
utiliser cette méthode.. l'utilisation avec Webfont.js
Peut-être quelque chose comme ceci:
Puis quand le chargement de la page, remplacer le corps du contenu avec le contenu réel et, espérons-le, entièrement rendu des polices, vous pouvez avoir à jouer avec ce que...