因Nunito字体导致offsetHeight值错误，如何用原生JS获取真实元素高度？

在使用offsetHeight获取元素高度时，发现返回值与浏览器检查器显示的正确高度（含内容、内边距、边框）不符，但移除Nunito字体或改用Arial等字体时，offsetHeight值就和检查器一致了，这直接影响了JavaScript实现的垂直对齐功能。

当前Nunito字体的两种加载方式（预加载/常规加载）均存在该问题：
预加载方式：

<link
  href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap"
  rel="preload"
  as="style"
  onload="this.onload=null;this.rel='stylesheet';"
/>

常规加载方式：

<link
  href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap"
  rel="stylesheet"
/>

• 等待字体完全加载后再计算高度
  浏览器会先使用 fallback 字体渲染元素，此时offsetHeight是基于备用字体计算的，Nunito加载完成后元素高度会更新，但JS可能已经提前执行了。可以通过document.fonts监听字体加载完成事件：

  document.fonts.ready.then(() => {
    // 这里执行高度获取和垂直对齐逻辑
    const targetElements = document.querySelectorAll('.your-element-selector');
    targetElements.forEach(el => {
      const correctHeight = el.offsetHeight;
      // 你的垂直对齐代码
    });
  });
  

• 显式设置元素line-height
  部分字体的默认行高会导致浏览器高度计算偏差，给目标元素设置明确的line-height（比如line-height: 1.4或固定像素值），能让高度计算更稳定，降低字体切换带来的波动。

• 尝试用getBoundingClientRect()替代offsetHeight
  getBoundingClientRect()返回的height是基于当前实时渲染状态计算的，有时比offsetHeight更准确：

  const elementRect = el.getBoundingClientRect();
  const actualHeight = elementRect.height;
  

• 确认font-display: swap生效
  虽然加载链接里已经带了display=swap，但要确保字体CSS中该属性正常生效，它能让浏览器先显示备用字体，避免页面加载卡顿，同时配合JS监听，确保字体替换后再计算高度。

内容的提问来源于stack exchange，提问作者Pablo Camara