一旦加载了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