Javascript 如何捕获何时加载我的材质图标？

我正在使用谷歌的这些图标和字体：

我正在开发一个web扩展，一些网页（如Github）正在阻止我的图标，我正在尝试使用vanilla js检查字体是否可用，这里的问题是我不知道何时需要确认字体是否已加载

我正在使用setTimeOut，但我真的很讨厌这种方法

我的代码：

function confirmFont(view) {

     setTimeout(function(){
         if(!document.fonts.check("12px Material-Icons")) {
             .....
         }
     }, 2000);

 }

---

我尝试了文档准备和窗口加载，但这不起作用，我需要更具体一些。

如果您已经使用了

文档.字体，为什么不使用该界面附带的？由于每当字体集加载完毕时就会触发
loadingdone
事件，因此您实际上可以使用事件侦听器来检查字体。下面是一个工作示例：


！函数（）{
//设置用于字体检查的侦听器
var font=“1rem‘材料图标’”；
document.fonts.addEventListener（'loadingdone'，函数（事件）{
log（`Checking${font}:${document.fonts.check（font）}`）；
})
//加载字体
var link=document.createElement（'link'），
head=document.getElementsByTagName（'head'）[0]；
link.addEventListener（'load'，function（））{
log（'Font-load'）；
})
link.type='text/css'；
link.rel='stylesheet'；
link.href=https://fonts.googleapis.com/icon?family=Material+图标'；
头.子（链接）；
}（）
face
我用以下方法解决了这个问题：

document.fonts.ready.then(function () {
    if(!document.fonts.check("12px Material-Icons")) {
        ...
    }
});

?