gpt4 book ai didi

javascript - 谷歌网络字体 : how to unload fonts after loading them?

转载 作者:数据小太阳 更新时间:2023-10-29 04:12:39 24 4
gpt4 key购买 nike

目前我可以使用 Google's Web Font loader 轻松加载网络字体:

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

但是,以后是否可以从 DOM 中卸载字体和添加的元素,这样它们就不再在页面上使用了?
项目 Github 上的文档没有显示提供该功能的任何选项或方法。

最佳答案

您可以简单地使用 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>

关于javascript - 谷歌网络字体 : how to unload fonts after loading them?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28766532/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com