一旦加载了networking字体,如何得到通知

谷歌的Web字体API提供了一种方法来定义callback函数,如果一个字体已经完成加载,或无法加载等。有没有办法使用CSS3networking字体(@ font-face)来实现类似的东西?

2015更新

Chrome 35+和Firefox 41+实现了CSS字体加载API ( MDN , W3C )。 调用document.fonts来获得一个FontFaceSet对象,它有几个有用的API来检测字体的加载状态:

  • check(fontSpec) – 返回给定字体列表中的所有字体是否已经加载并可用。 fontSpec使用字体的CSS简写语法 。
    例如: document.fonts.check('bold 16px Roboto'); // true or false 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's add some <strong>strong</strong> text to trigger loading the second one, with weight: 700. </p> 

Google Web Fonts API(和Typekit)使用的JS库可以在没有服务的情况下使用: WebFont Loader 。

它定义了你所要求的callback,还有更多 。

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

2017更新

JS库FontFaceObserver是2017年最好,最轻量级的跨浏览器解决scheme。它还公开了一个基于Promise的.load()接口。

window.load事件会在所有东西都加载的时候触发 – 应该包含字体所以你可以用它作为callback函数。 不过,我不认为你必须决定使用networking字体加载器

除了google,typekit,ascender和monotype选项之外,还有一个自定义模块,可以从任何web字体提供程序加载样式表。

WebFontConfig = {custom:{families:['OneFont','AnotherFont'],url:['http://myotherwebfontprovider.com/stylesheet1.css','http://yetanotherwebfontprovider.com/stylesheet2.css'%5D} };

无论您指定哪个提供程序,库都会发送相同的事件。

尝试使用ModernizerJS来解决这个问题

Interesting Posts