web-dev-qa-db-fra.com

Attendez que les polices soient chargées avant de rendre la page Web

J'utilise @ font-face pour intégrer des polices à mon site Web. Tout d'abord, le texte est affiché comme valeur par défaut du système, puis (une fois le fichier de police chargé chargé), la police appropriée s'affiche une fraction de seconde plus tard. Existe-t-il un moyen de réduire/supprimer ce délai en retardant le rendu de la page jusqu'à ce que les polices soient chargées ou similaires?.

cssfontsfont-face
43
wheresrhys

Cela dépend de la façon dont le navigateur se comporte.

Tout d'abord, où est déclarée votre @font? Est-il intégré à votre code HTML, déclaré dans une feuille CSS de la page ou (espérons-le) dans une feuille CSS externe?

Si ce n'est pas dans une feuille externe, essayez de la déplacer (c'est de toute façon une bonne pratique, de toute façon).

Si cela ne vous aide pas, vous devez vous demander si la différence d'une fraction de seconde est vraiment préjudiciable à l'expérience utilisateur. Si c'est le cas, pensez à JavaScript. Vous pouvez peut-être faire certaines choses, des redirections, des pauses, etc., mais elles pourraient bien être pire que le problème initial. Pire pour les utilisateurs, et pire à maintenir.

Ce lien pourrait aider:

http://paulirish.com/2009/fighting-the-font-face-fout/

16
Tom Gullen

Edit: La meilleure approche consiste probablement à base64 encoder vos polices. Cela signifie que votre police devra être entièrement chargée au moment où votre code HTML sera analysé et affiché. Vous pouvez le faire avec le générateur de polices web de la police Squirrel https://www.fontsquirrel.com/tools/webfont-generator en cliquant sur "Expert" puis sur "encoder en base64". Voici comment des services comme TypeKit fonctionnent.

Réponse originale: Un autre moyen de déterminer si les polices sont chargées consiste à utiliser FontLoader https://github.com/smnh/FontLoader ou en copiant leur stratégie.

Ils se lient à l'événement de défilement dans le navigateur, car lors du chargement de la police, le texte sera redimensionné. Il utilise deux div contenant (qui défilent lorsque la hauteur change) et un repli séparé pour IE.

Une alternative consiste à vérifier périodiquement le DOM avec setInterval, mais l'utilisation d'événements javascript est beaucoup plus rapide et supérieure.

Évidemment, vous pouvez par exemple définir l’opacité du corps à 0, puis l’afficher une fois la police chargée.

14
Ryan Taylor

Joni Korpi a publié un article intéressant sur le chargement des polices avant le reste de la page.

http://jonikorpi.com/a-smoother-page-load/

Il utilise également un fichier loading.gif pour réduire le délai afin que les utilisateurs ne soient pas frustrés. 

5
davecave

Seul IE charge d'abord la police, puis le reste de la page . Les autres navigateurs chargent des éléments simultanément pour une raison. Imaginez qu’il y ait un problème avec le serveur hébergeant la police ou avec le téléchargement de la police . Vous allez bloquer tout votre site jusqu'au chargement de la police. À mon avis, un éclair de texte sans style vaut mieux que de ne pas voir le site du tout.

4
nunopolonia

Utilisez https://github.com/typekit/webfontloader

et vérifiez les événements dans la configuration https://github.com/typekit/webfontloader#configuration

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
    WebFont.load({
        custom: {
            families: [ "CustomFont1", "CustomFont2" ]
        },
        active: function() {
            //Render your page
        }
    });
</script>
3
klodoma

Puisque personne n'a mentionné cela, je pense que cette question nécessite une mise à jour. J'ai réussi à résoudre le problème en utilisant l'option de "précharge" prise en charge par les navigateurs modernes.

Dans le cas où quelqu'un n'a pas besoin de supporter les anciens navigateurs.

<link rel="preload" href="assets/fonts/xxx.woff" as="font" type="font/woff" crossorigin>

quelques liens utiles avec plus de détails:

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_contenthttp://www.bramstein.com/writing/preload-hints-for-web- fonts.html

1
Ventura

Vous pouvez utiliser l'affichage des polices CSS dans votre @ font-face. Les mots-clés pour toutes les valeurs disponibles sont:

  • auto 
  • bloc
  • échanger 
  • se retirer
  • optionnel

Giulio Mainardi a écrit un article de Nice sur chacun d’entre eux, et que vous devriez utiliser où sur le site.

Vous pouvez le lire ici: https://www.sitepoint.com/css-font-display-future-font-rendering-web/?utm_source=frontendfocus&utm_medium=email

0
Lirianna