Home  >  Q&A  >  body text

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

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

PHP中文网PHP中文网2653 days ago726

reply all(1)I'll reply

  • 伊谢尔伦

    伊谢尔伦2017-04-10 12:44:44

    如何实现没有研究过,最简单的方法是使用 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
      }
    };

    reply
    0
  • Cancelreply