webfont技术优化 -webfontloader.js与font-spider

浏览器渲染问题

IE：
它会直接使用备用字体渲染，最后等webfont字体加载完毕后重新渲染。

Safari：
它会一直等待webfont字体加载完毕，并且期间不会渲染字体。

Chrome / Firefox：
它们会等待webfont字体加载，如果在3秒之内没有加载完毕，则使用备用字体渲染。最后webfont加载完毕，使用并重新渲染。

解决用户体验问题
为了保障用户的体验，我们必须让渲染方式统一。

通过Web字体加载器（webfontloader.js）
使用 Web Font Loader(github) 来实现，Web字体加载器在通过@font face使用链接字体时提供了添加的控件。它提供了一个通用的界面来加载字体，而不管其来源如何，然后添加一组标准的事件，您可以使用这些事件来控制加载体验。Web字体加载器能够从Google字体、typekit、fonts.com和fontdeck以及自承载的Web字体中加载字体。它是由谷歌和typekit共同开发的。
请看这段代码：

/* webfont字体完成或失败后显示字体 */
html.wf-active,
html.wf-inactive {