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

Question

非常轻松地加载网络字体

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>

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

Google Webfonts: how to unload fonts after loading them?

javascript

webfonts

google-webfonts

webfont-loader