使用jQuery知道何时加载了@ font-face字体？

我正在使用@ font-face，我讨厌Firefox显示默认字体，等待加载@ font-face字体，然后replace它。 所以整个页面都以新的字体闪烁。

Webkit浏览器只是在加载字体之前不显示文本，而且看起来更清晰。

所以，我想知道是否jQuery可以帮助我知道何时加载页面上的所有数据，包括@ font-face文件，以便我可以显示我的文本？ 有没有一个jQuery的方法告诉我什么时候一切都加载？

Answer 1

我使用这个function – 在Safari，Chrome，Firefox，Opera，IE7，IE8，IE9testing：

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提供程序 – 你（尽pipe我从来没有尝试过，因为我是一个Typekit用户。

请阅读http://code.google.com/apis/webfonts/docs/webfont_loader.html以及http://blog.typekit.com/2010/05/19/typekit-and-google/

Answer 4

我使用谷歌网页字体（克里特岛圆定期和打开常规与粗体）

你可以使用这个：

 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 Deferred Object。

Answer 5

也许..

创build一个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

我遇到了同样的问题。 不知何故，我不能让谷歌webfont加载器使用TTF字体（特别是中文字体）或加载字体时发送jQuery的响应。

所以我想出了这个更基本的解决scheme，在页面加载后dynamic改变字体时很有用。 它显示何时正确加载字体。

首先我创build一个虚拟div，然后用“abcd”填充，然后给它一个字体大小40，loggingdiv的宽度。 当通过button或任何东西调用“更改字体”事件时，应该跟踪虚拟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（）函数和其他一些我发现，但没有一个工作。 最后我find了一个解决scheme，只是在animation加载之前join一个延迟…就像这样：

 $(document).ready(function() { setTimeout(function (){ // The animation },150); }); // end ready 

我知道这不是最好的解决scheme，所以有人可以告诉我一个更好的？

谢谢！