2015-02-27 27 views
8

Şu anda Google's Web Font loader kullanarak çok kolay bir web yazı yükleyebilirsiniz:Google Web fontları: Yazı tiplerini yüklemeden sonra nasıl indirebilirsiniz?

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

Ancak, bu mümkün sonradan boşaltma yazı tipi ve onlar sayfada kullanılan artık konum böylece DOM unsurları ekledi?
Projenin Github'undaki belgeler, işlevselliği sunan herhangi bir seçeneği veya yöntemi göstermez.

+5

Bu benim asker bir cevap aldıktan sonra silinir dün cevap bir soru ölümünden sonra kopyasıdır:
Aşağıda basit bir örnek uygulamasıdır. Bu, cevabı sağlam ve kamuya açık tutmaya yarar. – Nit

cevap

7

DOM'da yapılan değişiklikleri takip etmek ve eklediğiniz öğeleri istediğiniz zaman kaldırmak için sadece MutationObserver kullanabilirsiniz.

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

İlgili konular