我正在使用谷歌的这些图标字体: https://material.io/icons/
我正在开发一个网络扩展,一些网页(例如 Github)阻止了我的图标,我正在尝试使用 vanilla js 检查字体是否可用,这里的问题是我不知道何时需要确认字体是否已加载。
我正在使用 setTimeOut,但我真的很讨厌这种方法。
我的代码:
function confirmFont(view) {
setTimeout(function(){
if(!document.fonts.check("12px Material-Icons")) {
.....
}
}, 2000);
}
我尝试准备好文档并加载窗口,但这不起作用,我需要更具体。
最佳答案
如果您已经使用 document.fonts
,为什么不使用 Events
那个接口(interface)附带的?由于只要字体集完成加载就会触发 loadingdone
事件,因此您实际上可以使用事件监听器来检查字体。下面是一个工作示例:
!function() {
// Setting up listener for font checking
var font = "1rem 'Material Icons'";
document.fonts.addEventListener('loadingdone', function(event) {
console.log(`Checking ${font}: ${ document.fonts.check(font)}`);
})
// Loading font
var link = document.createElement('link'),
head = document.getElementsByTagName('head')[0];
link.addEventListener('load', function() {
console.log('Font loaded');
})
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
head.appendChild(link);
}()
<i class="material-icons md-48">face</i>
关于javascript - 如何捕获我的 Material 图标何时加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48118300/