Используя jQuery, чтобы узнать, когда загружаются шрифты @ font-face?

Question

Я использую @ font-face и ненавижу, что Firefox показывает шрифт по умолчанию, ждет загрузки шрифта @ font-face, а затем заменяет его. Таким образом, вся страница мигает с новым шрифтом.

Браузеры Webkit просто не отображают текст, пока шрифт не загружен, и это выглядит намного чище.

Итак, мне интересно, может ли jQuery помочь мне узнать, когда все данные на странице загружены, включая файл @ font-face, чтобы я мог затем показать свой текст? Есть ли метод jQuery, который сообщает мне, когда все загружается?

Answer 1

Я использую эту функцию - проверено в 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 = '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 + ', sans-serif';

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

Answer 2

Хорошо, это было довольно легко.Обычно я просто устанавливаю свой текст:

a.main {visibility: hidden;}

, а затем добавляю:

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

Затем убедитесь, что в моем файле CSS также есть следующее:

a.main.shown {visibility: visible;}

Answer 3

Вы не должны использовать $(window).bind('load') - это будет ждать загрузки всей страницы (что, возможно, то, что вам нужно), а не только шрифта.Если вы хотите контролировать процесс загрузки @ font-face, используйте WebFont Loader, разработанный Google и Typekit.

Вы можете использовать его с Google Font API, typekit и вашим собственным поставщиком веб-шрифтов - вы (хотя я никогдапопробовал сам, так как я пользователь Typekit.

Читайте об этом здесь: http://code.google.com/apis/webfonts/docs/webfont_loader.html и здесь: http://blog.typekit.com/2010/05/19/typekit-and-google/

Answer 4

Я использую веб-шрифты Google (Crete Round Regular и Open Sans Regular с полужирным шрифтом)

Вы можете использовать это:

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

или это:

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

Обратите внимание, что в первом варианте я использовал отложенный объект jQuery.

Answer 5

Возможно ..

Создайте z-index: -10 div и заполните его большим количеством текста («обычным» шрифтом).На document.ready () или другое событие:

var originalnumber = $( div ).width() + $( div ).height() + $( div ).offset().top + $( div ).offset().left;

$( div ).css( 'font-family', 'MyPrettyWebfont' );

var interval = setInterval( function() {
    var number = $( div ).width() + $( div ).height() + $( div ).offset().top + $( div ).offset().left;

    if ( number !== originalnumber ) {
        // webfont is loaded and applied!
        clearInterval( interval );
    }
}, 10 );

Answer 6

У меня такая же проблема. И почему-то я не могу заставить загрузчик веб-шрифтов Google работать с шрифтом ttf (особенно с китайскими шрифтами) или отправить ответ jquery при загрузке шрифта.

Так что я придумал это более простое решение, полезное при динамическом изменении шрифта после загрузки страницы. показывает, когда шрифт правильно загружен.

Сначала я создаю фиктивный div, затем заполняю его abcd, а затем присваиваю ему размер шрифта 40 и записываю ширину div. Когда событие «изменить шрифт» вызывается с помощью кнопки или чего-либо еще, оно должно отслеживать изменения ширины фиктивного элемента. Изменение ширины будет означать, что шрифт изменился.

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!
    }
}

Answer 7

У меня та же проблема, и я пытаюсь использовать функцию readyfunction (), функцию bind () и некоторые другие, которые я нашел, но ни одна из них не работает.Наконец, я нашел одно решение, просто применив одну задержку перед загрузкой анимации ... вот так:

$(document).ready(function() {

setTimeout(function (){
   // The animation
},150);

}); // end ready

Я знаю, что это не лучшее решение, поэтому кто-то может сказать мне лучше ??*

Спасибо!