Vous utilisez jQuery pour savoir quand les polices @ font-face sont chargées?

Question

Je suis de l'utilisation de @font-face et je déteste que Firefox affiche la valeur par défaut de la police, attend de charger le @font-face de la police, le remplace alors. Ainsi, l'ensemble de la page clignote avec la nouvelle police.

Les navigateurs Webkit il suffit de ne pas afficher le texte jusqu'à ce que la police est chargée et c'est beaucoup plus propre look.

Donc, je me demandais si jQuery pourrait m'aider à savoir quand toutes les données sur le chargement de la page, y compris le @font-face de fichier, de sorte que je peux montrer mon texte? Est-il une méthode jQuery qui me dit que quand tout est chargé?

Answer 1

J'utilise cette fonction - testée dans Safari, Chrome, Firefox, Opera, IE7, IE8, IE9:

 function waitForWebfonts(fonts, callback) {
    var loadedFonts = 0;
    for(var i = 0, l = fonts.length; i < l; ++i) {
        (function(font) {
            var node = document.createElement('span');
            // Characters that vary significantly among different fonts
            node.innerHTML = 'giItT1WQy@!-/#';
            // Visible - so we can measure it - but not on the screen
            node.style.position      = 'absolute';
            node.style.left          = '-10000px';
            node.style.top           = '-10000px';
            // Large font size makes even subtle changes obvious
            node.style.fontSize      = '300px';
            // Reset any font properties
            node.style.fontFamily    = 'sans-serif';
            node.style.fontVariant   = 'normal';
            node.style.fontStyle     = 'normal';
            node.style.fontWeight    = 'normal';
            node.style.letterSpacing = '0';
            document.body.appendChild(node);

            // Remember width with no applied web font
            var width = node.offsetWidth;

            node.style.fontFamily = font;

            var interval;
            function checkFont() {
                // Compare current width with original width
                if(node && node.offsetWidth != width) {
                    ++loadedFonts;
                    node.parentNode.removeChild(node);
                    node = null;
                }

                // If all fonts have been loaded
                if(loadedFonts >= fonts.length) {
                    if(interval) {
                        clearInterval(interval);
                    }
                    if(loadedFonts == fonts.length) {
                        callback();
                        return true;
                    }
                }
            };

            if(!checkFont()) {
                interval = setInterval(checkFont, 50);
            }
        })(fonts[i]);
    }
};
 

Utilisez-le comme:

 waitForWebfonts(['MyFont1', 'MyFont2'], function() {
    // Will be called as soon as ALL specified fonts are available
});
 

Answer 2

Ok, c'était plutôt facile. Fondamentalement, je viens de définir mon texte à:

 a.main {visibility: hidden;}
 

puis ajoutez:

 $(window).bind("load", function() {
       $('#nav a.main').addClass('shown');
});
 

Ensuite, assurez-vous que ce qui suit est également dans mon fichier css:

 a.main.shown {visibility: visible;}
 

Answer 3

Vous devriez pas utiliser $(window).bind('load') - qui va attendre la fin de la page à charger (ce qui est peut-être ce que vous voulez), et pas seulement la police. Si vous voulez contrôler le processus de chargement de @font-faces utilisation WebFont Chargeur, développé par Google et Typekit.

Vous pouvez l'utiliser avec Google font API, typekit et votre propre webfont fournisseur - vous (bien que je n'ai jamais essayé moi-même que je suis un Typekit de l'Utilisateur.

Lire à ce sujet ici: http://code.google.com/apis/webfonts/docs/webfont_loader.html et ici: http://blog.typekit.com/2010/05/19/typekit-and-google/

Answer 4

J'utilise des polices Web Google (Crete Round Regular et Open Sans Regular avec Gras)

Vous pouvez utiliser soit ceci:

 var fonts = $.Deferred();
WebFontConfig = { google: { families: [ 'Crete+Round::latin', 'Open+Sans:400,700:latin' ] } , active : function() { fonts.resolve(); } };
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
fonts.done(function(){ alert('fonts'); });
 

ou ca :

 WebFontConfig = { google: { families: [ 'Crete+Round::latin', 'Open+Sans:400,700:latin' ] } , active : function() { alert('fonts'); } };
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
 

Notez que dans la première option j'ai utilisé jQuery Deferred Object.

Answer 5

Peut-être ..

Créez un z-index: -10 div et remplissez-le avec beaucoup de texte (avec une police 'normale'). Sur document.ready () ou un autre événement:

 var originalnumber = $( div ).width() + $( div ).height() + $( div ).offset().top + $( div ).offset().left;

$( div ).css( 'font-family', 'MyPrettyWebfont' );

var interval = setInterval( function() {
    var number = $( div ).width() + $( div ).height() + $( div ).offset().top + $( div ).offset().left;

    if ( number !== originalnumber ) {
        // webfont is loaded and applied!
        clearInterval( interval );
    }
}, 10 );