Préchargement @ polices font-face?

Question

Est-il possible de précharger ou autre cache @ polices font-face, très probablement avec le javascript, avant le chargement de la page afin de ne pas sauter laid quand la page ne charge enfin?

Answer 1

Je ne suis pas au courant d'aucune technique actuelle pour éviter le scintillement que les charges de police, mais vous pouvez le réduire en envoyant les en-têtes de cache appropriées pour votre police et faire en sorte que cette demande passe par le plus rapidement possible.

Answer 2

Une technique simple consiste à mettre quelque part dans l'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 et 29 FF et IE 11

Answer 3

Il y a quelques techniques pour « préchargement » ici: http://paulirish.com/2009/fighting-the-font-face- fout /

La plupart du temps le navigateur trompant dans le téléchargement du fichier aussi vite que possible ..

Vous pouvez également livrer comme données uri, ce qui aide beaucoup. et vous pouvez masquer le contenu de la page et le montrer quand il est prêt.

Answer 4

2017: Vous avez maintenant

  

MDN: La valeur de pré-charge de l'attribut rel de l'élément vous permet de   écrire chercher déclarative demandes dans votre code HTML, en spécifiant   les ressources que vos pages auront besoin très peu de temps après le chargement, que vous   veulent donc commencer préchargement au début du cycle de vie d'une page   charge, avant les principaux coups de pied de machines de rendu du navigateur. Ce   veille à ce qu'ils soient disponibles plus tôt et sont moins susceptibles de   Le premier bloc de la page rendu, conduisant à l'amélioration des performances.

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

Vérifier la compatibilité du navigateur .

Il est plus utile pour le préchargement de police (pas d'attente pour le navigateur pour le trouver dans certains CSS). Vous pouvez également précharger des logos, des icônes et des scripts.

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

Answer 5

Une bonne police pré-chargement est un grand trou dans la spécification HTML5. Je suis passé par toutes ces choses et la solution la plus fiable que j'ai trouvé est d'utiliser Font.js:

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

Vous pouvez l'utiliser pour charger les polices en utilisant la même API que vous utilisez pour charger des images

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

Il est beaucoup plus simple et plus léger que flandrin PoliceWeb Loader Google

Voici le repo github pour Font.js:

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

Answer 6

Cette devrait résoudre votre problème.

Pour répondre à votre question initiale: oui vous pouvez . Seuls les navigateurs Gecko et WebKit soutiennent actuellement bien.
Vous avez juste besoin d'ajouter des balises de lien dans votre tête:

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

Answer 7

webfontloader

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
        }
    }
});

Answer 8

Je l'ai fait en ajoutant une lettre dans mon document principal et fait transparent et affecté 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>

Answer 9

Utilisez la norme CSS polices API de chargement .

Attendez ( tous ) les polices à charger, puis afficher votre contenu:

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

Démo CodePen .

Answer 10

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

Utilisation fillText avec une police qui n'a pas encore été chargé exécutera correctement mais sans retour visuel - de sorte que le plan de la toile restera intacte - tout ce que vous devez faire est de vérifier périodiquement la toile pour toute modification (par exemple une boucle à travers getImageData la recherche d'un pixel non transparent) qui va se passer lorsque les charges de police correctement.

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

Answer 11

Google a une belle bibliothèque pour cela: https://developers.google.com/webfonts/ docs / webfont_loader Vous pouvez utiliser presque toutes les polices et les lib ajouter des classes à la balise html.

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

Ne pas oublier de servir vos fontfiles gzippés! il va certainement accélérer les choses!

Answer 12

Comme je l'ai trouvé la meilleure façon est en train de faire est préchargement une feuille de style qui contient le visage de la police, puis laisser le navigateur pour le charger automatiquement. J'ai utilisé la police face à d'autres endroits (dans la page html), mais je pourrais observer brièvement l'effet de changement de police.

<link href="fonts.css?family=Open+Sans" rel="preload stylesheet" as="style">

puis dans le fichier font.css, spécifiez comme suit.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('open-sans-v16-latin-regular.woff2') format('woff2'); /*  Super Modern Browsers */
}

Vous ne pouvez pas attribuer un nom aux polices quand il est pré-chargé par balise de lien (corrigez-moi si je me trompais, je ne pouvais pas trouver un moyen encore), et donc vous devez utiliser font-face pour attribuer le nom à la Police de caractère. Même si il est possible de charger une police par balise de lien, il est recommandé que vous ne pouvez pas attribuer un nom à la police avec elle. Sans nom avec la police face, vous ne pourrez pas l'utiliser partout dans la page Web. Selon gtmetrix, les charges de feuille de style au début, puis reste des scripts / style en ordre, puis la police avant dom est chargé, et donc vous ne voyez pas l'effet de changer la police.

Answer 13

Votre tête doit inclure la pré-charge rel comme suit:

<head>
    ...
    <link rel="preload" as="font" href="/somefolder/font-one.woff2">
    <link rel="preload" as="font" href="/somefolder/font-two.woff2">
</head>

Cette woff2 façon sera pré-chargé par les navigateurs qui prennent en charge pré-charge, et tous les formats de repli se charge comme ils le font normalement.
Et votre visage de police css devrait ressembler à ce

@font-face {
    font-family: FontOne;
    src: url(../somefolder/font-one.eot);
    src: url(../somefolder/font-one.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-one.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-one.woff) format('woff'),
    url(../somefolder/font-one.ttf)  format('truetype'),
    url(../somefolder/font-one.svg#svgFontName) format('svg'); 
}
@font-face {
    font-family: FontTwo;
    src: url(../somefolder/font-two.eot);
    src: url(../somefolder/font-two.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-two.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-two.woff) format('woff'),
    url(../somefolder/font-two.ttf)  format('truetype'),
    url(../somefolder/font-two.svg#svgFontName) format('svg');
}