Google Webfonts: jak wyładować czcionki po ich załadowaniu?

Question

Obecnie mogę załadować czcionkę internetową bardzo łatwo za pomocą Google's Web Font loader:

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

Jednak możliwe jest później rozładować czcionek i elementów z DOM dodany tak że nie są już stosowane na stronie?
Dokumentacja na Github projektu nie pokazuje żadnych opcji ani metod, które oferują funkcjonalność.

Answer 1

Możesz po prostu użyć MutationObserver, aby śledzić zmiany wprowadzone w DOM i usuwać dodane elementy, kiedy chcesz.
Poniżej jest prosta implementacja próbki:

(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>