如何判 @font-face 字体文件已经载入完全

Question

web上用字体文件做的图标，通过@font-face载入，需要判断字体文件是否载入完成，如何搞定？

Answer 1

如何实现没有研究过，最简单的方法是使用 google 的 WebFont Loader
它提供了载入各种状态的 callback 支持：

WebFontConfig = {

  google: {

    families: [ 'Tangerine', 'Cantarell' ]

  },

  typekit: {

    id: 'myKitId'

  },

  loading: function() {

    // do something

  },

  fontloading: function(fontFamily, fontDescription) {

    // do something

  },

  fontactive: function(fontFamily, fontDescription) {

    // do something

  },

  fontinactive: function(fontFamily, fontDescription) {

    // do something

  },

  active: function() {

    // do something

  },

  inactive: function() {

    // do something

  }

};