为什么导入的字体不影响React中的元素大小？

Question

我正在创建一个带有滑块的导航栏，看起来像这样：

使用以下代码获取“滑块”的尺寸：

function setSliderLocation(navLocation) {
    const activeWidth = navLocation.current.offsetWidth;
    const itemPosition = navLocation.current.offsetLeft;

    const selector = document.querySelector(".selector");
    selector.style.left = itemPosition + "px";
    selector.style.width = activeWidth + "px";    
  }

上面的代码有效...但是...

当使用自定义字体（使用@ font-face导入）时，在第一个渲染上测量的元素尺寸不正确。

这是一个示例图片（在这里可能很难看到）：

奇怪的是，使用标准内置字体时我没有遇到此问题。

我只提取了给我一些问题的代码部分（来自一个较大的项目）。 You you can download the code from GitHub并运行：

npm install

然后：

npm start

看看我指的是什么。

大约一个星期以来，我一直在努力解决这个问题，希望人们对发生的事情有所了解。

这是React吗？ CSS的东西？字体的东西？任何见识将不胜感激。

感谢您的阅读。