web-dev-qa-db-ja.com

jfontを使用して@ font-faceフォントがいつ読み込まれるかを確認しますか？

私は@ font-faceを使用していますが、Firefoxがデフォルトのフォントを表示し、@ font-faceフォントのロードを待ってから置き換えることを嫌います。したがって、ページ全体が新しいフォントで点滅します。

Webkitブラウザーは、フォントが読み込まれるまでテキストを表示せず、見た目はずっときれいです。

だから、@ font-faceファイルを含め、ページ上のすべてのデータが読み込まれたときにjQueryが役立つので、テキストを表示できるのではないかと思っています。すべてがロードされたときに通知するjQueryメソッドはありますか？

javascriptjquerycssfont-face
40
Nic Hubbard

私はこの機能を使用します-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
});
52
Thomas Bachem

$(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 /

17
jgradim

おそらく..

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 );
1
Sven Spruijt

同じ問題が発生しました。そして、どういうわけか、Google webfontローダーをttfフォント（特に中国語フォント）で動作させたり、フォントが読み込まれたときにjquery応答を送信したりできません。

そこで、ページを読み込んだ後にフォントを動的に変更するときに役立つ、より基本的なソリューションを考え出しました。フォントフェースが適切にロードされると表示されます。

最初にダミーのdivを作成し、「abcd」で埋めてから、フォントサイズを40に設定し、divの幅を記録します。 「フォントの変更」イベントがボタンなどを介して呼び出されると、ダミーの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!
    }
}
0
Tien Lu