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

Question

我有一个 div 元素，其中包含带有字体系列的文本，以设置为通过 @font-face 属性在 CSS 中指定的自定义字体。由于字体仅在页面上的可见文本中使用后才加载，因此 div 元素以默认字体系列显示时存在一定的时间间隔。我需要执行元素大小测量，目前我在将元素添加到 DOM 后立即执行此操作。如果尚未加载字体，我会在加载 CSS 中指定的字体系列后得到不正确的初始大小值。所以我的问题是如何检测到这一点并再次执行重新测量文本？想到的唯一解决方案是使用字体加载API. 我使用检查方法来查看字体是否准备好，如果没有，我会收听 ready 事件以再次执行文本测量。有没有更好/更直接的方法来做到这一点？

标签： javascripthtmlcss

Answer 1

为了检测 DOM 元素的大小变化，让我们使用Resize Observer

步骤是：

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