使用自定义字体时，Masonry 和 Bootstrap 无法正确呈现（在新加载时）

Question

我正在关注这个Masonry & Bootstrap example。

在我尝试使用自定义字体之前，它运行良好。然后，如果最终框的大小与没有它的自定义字体不同，则框的分布计算不正确。

看起来 Masonry 代码是在加载字体之前执行的，它进行计算但随后加载字体并且框大小发生变化。

这里有一个工作代码笔示例：

• https://codepen.io/fguillen/pen/xxJrKgE

我正在添加这个：

<style>
  /* Importing the fonts */
  @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

  body {
    font-family: 'Libre Baskerville', serif;
  }
</style>

尝试在没有缓存的情况下重新加载（cmd + shift + R（在 Mac Chrome 中））。

错误分布：

正确分配（第二次加载）：

如何正确处理这个问题？

Answer 1

我猜想解决方案将类似于此 answer 中建议的解决方案，即使您只是在超时函数中执行此操作也是如此。另见How to be notified once a web font has loaded。

document.fonts.ready.then(function () {
  msnry.reloadItems();
});

您甚至可以使用 CSS 隐藏网格直到完成（可见性或不透明度），然后显示它。