加载Web字体后如何通知

check(fontSpec)

fontSpec

document.fonts.check(\'bold 16px Roboto\');  // true or false

document.fonts.ready

document.fonts.onloadingdone

alert(\'Roboto loaded? \' + document.fonts.check(\'1em Roboto\'));  // false

document.fonts.ready.then(function () {
  alert(\'All fonts in use by visible text have loaded.\');
   alert(\'Roboto loaded? \' + document.fonts.check(\'1em Roboto\'));  // true
});

document.fonts.onloadingdone = function (fontFaceSetEvent) {
   alert(\'onloadingdone we have \' + fontFaceSetEvent.fontfaces.length + \' font faces loaded\');
};

<link href=\'https://fonts.googleapis.com/css?family=Roboto:400,700\' rel=\'stylesheet\' type=\'text/css\'>
<p style=\"font-family: Roboto\">
  We need some text using the font, for the font to be loaded.
  So far one font face was loaded.
  Let\'s add some <strong>strong</strong> text to trigger loading the second one,
    with weight: 700.
</p>

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

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

.load()