Comment savoir si une police (@font-face) a déjà été chargé?

Question

Je suis à l'aide de la Police Génial, mais alors que les fichiers de police ne sont pas chargés, les icônes s'affichent avec .

Donc, je veux une de ces icônes pour avoir display:none tandis que les fichiers ne sont pas chargés.

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

Comment puis-je savoir que ces fichiers ont été chargés, et je suis enfin en mesure de montrer les icônes?

Edit: Je ne parle pas au chargement de la page (onload), car la police n'a pu être chargé avant de l'ensemble de la page.

Answer 1

Maintenant sur GitHub: https://github.com/patrickmarabeas/jQuery-FontSpy.js

Essentiellement, la méthode fonctionne en comparant la largeur d'une chaîne de caractères dans deux polices différentes. Nous sommes à l'aide de Comic Sans que la police de caractères à tester, parce que c'est le plus différent de la sécurité web polices et espérons-le, assez différent pour tout type de police que vous allez utiliser. De plus, nous utilisons une très grande police de caractères de taille de sorte que même de petites différences apparentes. Lorsque la largeur de la bande Dessinée Sans chaîne a été calculé, la police de caractères de la famille est modifié à votre police personnalisée, avec un repli de Comic Sans. Lorsque cette option est cochée, si l'élément de chaîne largeur est la même, la police de secours de la Comic Sans est encore en usage. Si non, votre police devrait être opérationnel.

J'ai réécrit la méthode de chargement de polices de détection dans un plugin jQuery conçus pour donner aux développeurs la possibilité à des éléments de style basé sur si la police a été chargé ou non. Fail safe minuterie a été ajoutée afin que l'utilisateur n'est pas laissé sans contenu si la coutume de la police ne parvient pas à charger. C'est juste une mauvaise utilisation.

J'ai également ajouté un plus grand contrôle sur ce qui se passe pendant le chargement de polices et sur échouer avec l'inclusion de classes d'ajout et de suppression. Vous pouvez maintenant faire ce que vous voulez à la police. Je voudrais seulement vous recommandons de modifier les polices, la taille, l'espacement des lignes, etc pour obtenir votre chute en arrière de la police comme près de la coutume que possible de sorte que votre mise en page reste intacte, et les utilisateurs bénéficient d'une expérience attendue.

Voici une démo: http://patrickmarabeas.github.io/jQuery-FontSpy.js

Lancer la commande suivante dans un .fichier js et de référence.

(function($) {

    $.fontSpy = function( element, conf ) {
        var $element = $(element);
        var defaults = {
            font: $element.css("font-family"),
            onLoad: '',
            onFail: '',
            testFont: 'Comic Sans MS',
            testString: 'QW@HhsXJ',
            delay: 50,
            timeOut: 2500
        };
        var config = $.extend( defaults, conf );
        var tester = document.createElement('span');
            tester.style.position = 'absolute';
            tester.style.top = '-9999px';
            tester.style.left = '-9999px';
            tester.style.visibility = 'hidden';
            tester.style.fontFamily = config.testFont;
            tester.style.fontSize = '250px';
            tester.innerHTML = config.testString;
        document.body.appendChild(tester);
        var fallbackFontWidth = tester.offsetWidth;
        tester.style.fontFamily = config.font + ',' + config.testFont;
        function checkFont() {
            var loadedFontWidth = tester.offsetWidth;
            if (fallbackFontWidth === loadedFontWidth){
                if(config.timeOut < 0) {
                    $element.removeClass(config.onLoad);
                    $element.addClass(config.onFail);
                    console.log('failure');
                }
                else {
                    $element.addClass(config.onLoad);
                    setTimeout(checkFont, config.delay);
                    config.timeOut = config.timeOut - config.delay;
                }
            }
            else {
                $element.removeClass(config.onLoad);
            }
        }
        checkFont();
    };

    $.fn.fontSpy = function(config) {
        return this.each(function() {
            if (undefined == $(this).data('fontSpy')) {
                var plugin = new $.fontSpy(this, config);
                $(this).data('fontSpy', plugin);
            }
        });
    };

})(jQuery);

L'appliquer à votre projet

.bannerTextChecked {
        font-family: "Lobster";
        /* don't specify fallback font here, do this in onFail class */
}

$(document).ready(function() {

    $('.bannerTextChecked').fontSpy({
        onLoad: 'hideMe',
        onFail: 'fontFail anotherClass'
    });

});

Supprimer FOUC!

.hideMe {
    visibility: hidden !important;
}

.fontFail {
    visibility: visible !important;
    /* fall back font */
    /* necessary styling so fallback font doesn't break your layout */
}

EDIT: FontAwesome compatibilité supprimée car elle n'a pas fonctionné correctement et a couru dans des problèmes avec des versions différentes. Un hacky fix peut être trouvé ici: https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1

Answer 2

Essayez WebFont Chargeur, développé par Google et Typekit.

Cet exemple affiche le texte par défaut dans la police serif; puis, après les polices ont chargé, il affiche le texte dans la police spécifiée. (Ce code reproduit par défaut de Firefox comportement dans tous les autres navigateurs modernes.)

Answer 3

Ici c'est une approche différente pour les solutions des autres.

Je suis l'aide de FontAwesome 4.1.0 à construire WebGL textures. Qui m'a donné l'idée d'utiliser une petite toile pour rendre une fa-carré, puis vérifier un pixel dans cette toile pour vérifier si elle a chargé:

function waitForFontAwesome( callback ) {
   var retries = 5;

   var checkReady = function() {
      var canvas, context;
      retries -= 1;
      canvas = document.createElement('canvas');
      canvas.width = 20;
      canvas.height = 20;
      context = canvas.getContext('2d');
      context.fillStyle = 'rgba(0,0,0,1.0)';
      context.fillRect( 0, 0, 20, 20 );
      context.font = '16pt FontAwesome';
      context.textAlign = 'center';
      context.fillStyle = 'rgba(255,255,255,1.0)';
      context.fillText( '\uf0c8', 10, 18 );
      var data = context.getImageData( 2, 10, 1, 1 ).data;
      if ( data[0] !== 255 && data[1] !== 255 && data[2] !== 255 ) {
         console.log( "FontAwesome is not yet available, retrying ..." );
         if ( retries > 0 ) {
            setTimeout( checkReady, 200 );
         }
      } else {
         console.log( "FontAwesome is loaded" );
         if ( typeof callback === 'function' ) {
            callback();
         }
      }
   }

   checkReady();
};

Comme il utilise une toile, il nécessite une assez moderne navigateur, mais il pourrait travailler sur IE8 ainsi avec le polyfill.

Answer 4

Voici une autre façon de savoir si un @font-face a déjà été chargé, sans avoir à utiliser les timers à tous: http://smnh.me/web-font-loading-detection-without-timers/

Github: https://github.com/smnh/FontLoader

Answer 5

Essayez quelque chose comme

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

et puis ne

#text {visibility: hidden;}
#text.shown {visibility: visible;}

L'événement load doit le feu après les polices sont chargés.