Javascript 如何检测由于异步web字体加载而发生的DOM元素大小调整？

我有一个div元素，其中包含要设置为自定义字体的字体族文本，该字体在CSS中通过@font-face属性指定。由于字体仅在页面上的可见文本中使用后才加载，因此使用默认字体系列显示div元素时会有一段时间间隔。我需要执行元素大小测量，目前我在将元素添加到DOM后立即执行。若字体还并没有加载，我得到的初始大小值在CSS中指定的字体系列加载后变得不正确。所以我的问题是，我如何才能检测到这一点，并再次执行重新测量文本？

---

想到的唯一解决办法是使用。我使用check方法查看字体是否已准备就绪，如果未准备就绪，我将侦听ready事件以再次执行文本度量。有更好/更直接的方法吗？

要检测DOM元素中的大小变化，让我们使用

这些步骤是：

• 创建ResizeObserver，其中将调用具有提供的大小更改的回调
• 将该观察者附加到要正确获取大小的图元

---

请问您为什么要这样做？我猜你想正确地得到div元素的大小，是吗？我通过foreignobject在svg上显示html文本，我需要从一个svg形状中“剪切”文本元素背景，我正在使用掩码来完成这项工作。基本上我这样做是为了计算矩形掩模的大小。