web-dev-qa-db-fra.com

Préchargement des polices @ font-face?

Est-il possible de précharger ou de mettre en cache les polices @ font-face, le plus souvent en javascript, avant le chargement de la page afin d'éviter tout saut moche lors du chargement de la page?

javascriptcssfontsembeddingfont-face
44
dougoftheabaci

Je ne suis au courant d'aucune technique actuelle permettant d'éviter le scintillement lors du chargement de la police. Toutefois, vous pouvez le réduire en envoyant des en-têtes de cache appropriés pour votre police et en veillant à ce que cette demande soit traitée le plus rapidement possible.

1
Gabriel Hurley

Une technique simple consiste à mettre cela quelque part dans votre index:

<div class="font_preload" style="opacity: 0">
    <span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
    <span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
    ...
</div>

Testé sur Chrome 34, Safari 7, FF 29 et IE 11

28
Rafouille

Il existe quelques techniques de "préchargement" ici: http://paulirish.com/2009/fighting-the-font-face-fout/

Inciter le navigateur à télécharger le fichier le plus rapidement possible.

Vous pouvez également le livrer sous forme de données-uri, ce qui aide beaucoup . Vous pouvez également masquer le contenu de la page et l'afficher quand il est prêt.

22
Paul Irish

2017: Vous avez maintenant précharge

MDN: La valeur de préchargement de l'attribut rel de l'élément vous permet de écrire des requêtes de récupération déclaratives dans votre code HTML, en spécifiant ressources dont vos pages auront besoin très vite après le chargement, que vous par conséquent, vous souhaitez commencer le préchargement tôt dans le cycle de vie d'une page charge, avant que la machine de rendu principale du navigateur ne démarre. Ceci veille à ce qu'elles soient disponibles plus tôt et moins susceptibles de. bloque le premier rendu de la page, ce qui entraîne une amélioration des performances.

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />

Vérifiez compatibilité du navigateur .

C'est très utile pour le préchargement des polices (sans attendre que le navigateur le trouve dans certains CSS). Vous pouvez également précharger certains logos, icônes et scripts.

D'autres techniques pour/contre sont discutées ici (pas mon blog).

13
Christophe Roussy

Le préchargement correct des polices est un gros trou dans la spécification HTML5 ..__ J'ai examiné toutes ces informations et la solution la plus fiable que j'ai trouvée consiste à utiliser Font.js:

http://pomax.nihongoresources.com/pages/Font.js/

Vous pouvez l'utiliser pour charger des polices à l'aide de la même API que celle utilisée pour charger des images.

var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
  console.log("font loaded");
}

C'est beaucoup plus simple et plus léger que Le Webfont Loader de Google

Voici le repo de github pour Font.js:

https://github.com/Pomax/Font.js

5
d13

This devrait résoudre votre problème.

Pour répondre à votre question initiale: oui vous pouvez. Toutefois, seuls les navigateurs Gecko et WebKit le prennent en charge.
Il vous suffit d’ajouter des balises de lien dans votre tête:

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
3
Knu

je l'ai fait en ajoutant une lettre dans mon document principal, en le rendant transparent et en attribuant la police que je voulais charger.

par exemple.

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>
2
Trent

Via webfontloader de Google 

var fontDownloadCount = 0;
WebFont.load({
    custom: {
        families: ['fontfamily1', 'fontfamily2']
    },
    fontinactive: function() {
        fontDownloadCount++;
        if (fontDownloadCount == 2) {
            // all fonts have been loaded and now you can do what you want
        }
    }
});
1
Razan Paul

Utilisez le standard API de chargement de polices CSS .

Attendez (tous _) le chargement des polices, puis affichez votre contenu:

document.fonts.ready.then((fontFaceSet) => {
    console.log(fontFaceSet.size, 'FontFaces loaded.');
    document.getElementById('waitScreen').style.display = 'none';
});

Démo CodePen .

0
yPhil

Google dispose d'une bibliothèque Nice pour cela: https://developers.google.com/webfonts/docs/webfont_loader Vous pouvez utiliser presque toutes les polices et la bibliothèque ajoutera des classes à la balise HTML. 

Il vous donne même des événements javascript sur lorsque les polices certrain sont chargées et actives!

N'oubliez pas de servir vos fichiers fontes gzippés! ça va certainement accélérer les choses!

0
Miguel Alejandro Fuentes Lopez

Récemment, je travaillais sur un jeu compatible avec CocoonJS avec DOM limité à l’élément canvas - voici mon approche:

Utiliser fillText avec une police qui n'a pas encore été chargée s'exécutera correctement, mais sans retour visuel. Le plan de la toile restera donc intact. pixel non transparent) qui se produira lorsque la police sera chargée correctement.

J'ai expliqué un peu plus cette technique dans mon article récent http://rezoner.net/preloading-font-face-using-canvas,686

0
rezoner