Google Webfonts:加载后如何卸载字体？

Question

目前,我可以使用Google的Web字体加载器轻松加载网络字体:

WebFont.load({
    google: {
        families: ['Bree Serif']
    }
});

但是,以后可以从DOM中卸载字体并添加元素,以便它们不再在页面上使用吗？
项目的Github上的文档没有显示提供该功能的任何选项或方法.

Answer 1

您可以简单地使用MutationObserver来跟踪对DOM所做的更改,并在您需要时删除添加的元素.
下面是一个简单的示例实现:

(function() {
  "use strict";
  var addedNodes = [];
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      Array.prototype.forEach.call(mutation.addedNodes, function(node) {
        addedNodes.push(node);
      });
    });
    observer.disconnect();
  });
  loader.addEventListener('click', function() {
    observer.observe(document, {
      childList: true,
      subtree: true,
      addedNodes: true
    });
    //Two loads simply to demonstrate that's not a problem
    WebFont.load({
      google: {
        families: ['Bree Serif']
      }
    });
    WebFont.load({
      google: {
        families: ['Indie Flower']
      }
    });
    loader.disabled = true;
    remover.disabled = false;
  });

  remover.addEventListener('click', function() {
    addedNodes.forEach(function(node) {
      node.remove();
    });
    addedNodes = [];
    loader.disabled = false;
    remover.disabled = true;
  });
}());

body {
  text-align: center;
  background: aliceblue;
}
h1 {
  font-family: 'Indie Flower';
  font-size: 3em;
  color: cadetblue;
}
p {
  font-family: 'Bree Serif';
  color: crimson;
}
input[disabled] {
  display: none;
}

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<input id="loader" type="button" value="Click to load webfonts" />
<input id="remover" type="button" value="Remove loaded webfonts" disabled="true" />
<h1>Chapter 1</h1>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>