Google Webfonts: Wie entlädt man Zeichensätze nach dem Laden?

Question

Zeit sehr leicht kann ich eine Web-Schrift lädt Google's Web Font loader mit:

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

Allerdings ist es möglich, später Entladen die Schriften und Elemente aus dem DOM hinzugefügt so dass sie nicht auf der Seite mehr verwendet?
Die Dokumentation zum Projekt Github zeigt keine Optionen oder Methoden, die die Funktionalität bieten.

Answer 1

Sie können einfach eine MutationObserver verwenden, um die Änderungen am DOM zu verfolgen und die hinzugefügten Elemente zu entfernen, wenn Sie dies wünschen.
Nachfolgend finden Sie eine einfache Beispielimplementierung:

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