Как получить уведомление после загрузки веб-шрифта

Ответ 1

Обновление 2015 года

Chrome 35+ и Firefox 41+ реализуют API http://www.w3.org/TR/css-font-loading/ "rel=" noreferrer " > W3C). Вызовите document.fonts, чтобы получить объект FontFaceSet, который имеет несколько полезных API для определения состояния загрузки шрифтов:

• check(fontSpec) - возвращает ли все шрифты в данном списке шрифтов загружены и доступны. fontSpec использует сокращенный синтаксис CSS для шрифтов.
  Пример: document.fonts.check('bold 16px Roboto'); // true or false
• document.fonts.ready - возвращает Promise указывая, что выполняются операции по загрузке шрифтов и компоновке.
  Пример: document.fonts.ready.then(function () { /*... all fonts loaded...*/ });

Вот фрагмент, показывающий эти API, плюс 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 add some <strong>strong</strong> text to trigger loading the second one,
    with weight: 700.
</p>

Ответ 2

Библиотека JS, используемая API веб-шрифтов Google (и Typekit), может использоваться без службы: WebFont Loader.

Он определяет обратные вызовы для того, что вы просите, и еще много.

Ответ 3

Протестировано в 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 = '[email protected]!-/#';
            // 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
});

Ответ 4

Обновление 2017

Библиотека JS FontFaceObserver - это, безусловно, лучшее, самое легкое, кросс-браузерное решение с 2017 года. Оно также предоставляет Promise на основе .load().

Ответ 5

Событие window.load загорится, когда все загрузится - это должно включать в себя шрифты Поэтому вы можете использовать это как звонок назад. Однако я не думаю, что вам нужно, чтобы вы использовали загрузчик веб-шрифтов как

В дополнение к google, typekit, варианты подставок и монотипов, там также является настраиваемым модулем, который может загружать таблица стилей из любого веб-шрифта провайдера.

WebFontConfig = {custom: { семьи: ['OneFont', 'AnotherFont'],     URL: ['http://myotherwebfontprovider.com/stylesheet1.css',       'Http://yetanotherwebfontprovider.com/stylesheet2.css' ]}};

Библиотека отправляет те же события независимо от того, какой провайдер вы указываете.

Ответ 6

Попробуйте использовать ModernizerJS, чтобы решить эту проблему.