Cross-Browser-Webfonts geladen Ereignis

Ich versuche, die Breite eines bestimmten Zeichens in einem Webfont zu messen. Das aktive Ereignis, das von Google bereitgestellt wirdWebfont Loader Es wird etwas zu früh ausgelöst und die Messung auf der Standardschriftart durchgeführt.

Eine abgespeckte Version des Skripts, mit dem ich arbeite:

window.WebFontConfig = {
    google: {
        families: ['Anonymous Pro:400,400italic,700,700italic']
    },

    active: function () {
        $.fn.ready(MeasureM);
    }
};

function MeasureM() {
    var e = document.getElementById('div');
    e.style.font = "15px/15px 'Anonymous Pro'";
    e.appendChild(document.createTextNode('M'));
    console.log(e.offsetWidth, e.offsetHeight);
}

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

Das HTML-Element:

<div id="div" style="display: table;"></div>

Der Einfachheit halber ajsFiddle.

Gibt es eine Lösung für das Problem, das scheinbar nur in Firefox auftritt? Oder gibt es etwas, das ich missverstehe?

Antworten auf die Frage(0)

Ihre Antwort auf die Frage