使用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-faces的加载过程,请使用由Google和Typekit开发的WebFont Loader.

您可以将它与Google Font API,typekit和您自己的webfont提供程序一起使用 - 您(尽管我自己从未尝试过,因为我是Typekit用户.

在此处阅读:http://code.google.com/apis/webfonts/docs/webfont_loader.html此处:http://blog.typekit.com/2010/05/19/typekit-and-google/