Utilisation de jQuery pour savoir quand @font-face polices sont chargés?

Ok, c'était assez facile. Fondamentalement, j'ai juste mis mon texte:

a.main {visibility: hidden;}

puis ajouter:

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

Alors assurez-vous que les éléments suivants sont également dans mon fichier css:

a.main.shown {visibility: visible;}

- Je utiliser les polices web de google (Crète Ronde Ouverte et Régulière Sans Régulière avec Gras)

Vous pouvez utiliser 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 ceci :

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

Noter que dans la première option, j'ai utilisé jQuery Différée Objet.

J'ai eu le même problème. Et de toute façon je ne peux pas obtenir de Google webfont chargeur de travailler avec la police ttf (surtout chinois polices) ou d'envoyer un jquery réponse lorsque la police est chargée.

Donc, je suis venu avec cette solution de base, utile lors de la modification de la police de manière dynamique une fois que la page est chargée. il montre que lorsque la police est correctement chargé.

J'ai d'abord créer un mannequin div et le remplir avec les "abcd" et puis de lui donner une taille 40, enregistrer la largeur de la div. Lorsque le " changer la police de caractère de l'événement est appelé par l'intermédiaire d'un bouton ou quoi que ce soit, il doit suivre le mannequin div largeur des changements. La largeur des changements représentent que la police a changer.

CODE HTML

<style>
@font-face {
font-family: 'font1';
src:url('somefont.ttf')  format('truetype');
}
</style>
<div id="dummy" style="border:1px solid #000; display:inline-block">abdc</div>
<!--simple button to invoke the fontchange-->
<input type="button" onclick="javascript:changefont('font1')" value="change the font"/>

JQuery

//create a variable to track initial width of default font
var trackwidth
//when change font is invoke
function changefont(newfont)
{
//reset dummy font style
$('#dummy').css('font-family','initial !important;');
$('#dummy').css({'font-size':'40px'});
$('#dummy').html('abcd');
//ensure that trackwidth is only recorded once of the default font
if(trackwidth==null)
{
trackwidth=( $('#dummy').width());
}
//apply new font
$('#dummy').css('font-family',newfont);
checkwidth()
}
function checkwidth()
{
//check if div width changed
if($('#dummy').width() == trackwidth)
{
//if div never change, detect again every 500 milisecs
setTimeout(checkwidth, 500);
}
else
{
//do something, font is loaded!
}
}