使用自定义字体时Masonry与Bootstrap首次加载渲染异常

问题背景 #

参考Bootstrap的Masonry示例，原本布局正常，添加自定义字体后，首次清除缓存刷新页面时Masonry出现布局错乱，二次加载则恢复正常。核心原因是Masonry在自定义字体加载完成前就完成了布局计算，字体加载后盒子尺寸（尤其是高度）发生变化，导致已计算好的布局错位。

添加的自定义字体代码示例：

<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>

可行解决方案 #

1. 利用浏览器字体加载API延迟Masonry初始化 #

通过document.fonts.ready Promise等待所有字体加载完成后，再初始化Masonry或触发重新布局，确保计算基于最终渲染的字体尺寸。

document.fonts.ready.then(() => {
  // 初始化Masonry
  const grid = document.querySelector('.grid');
  const masonry = new Masonry(grid, {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true
  });

  // 若Masonry已提前初始化，调用layout()重新计算
  // masonry.layout();
});

2. 使用Web Font Loader精准监听字体加载 #

Web Font Loader提供更细致的字体加载状态监听，可针对目标字体完成加载后再执行Masonry布局，避免等待所有字体。

1. 先引入Web Font Loader库（可从官方仓库获取）
2. 配置字体加载监听：

<script src="path/to/webfont.js"></script>
<script>
WebFont.load({
  google: {
    families: ['Libre Baskerville:400,700,400i']
  },
  active: () => {
    // 目标字体加载完成，初始化Masonry
    const grid = document.querySelector('.grid');
    const masonry = new Masonry(grid, {
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
    });
  }
});
</script>

3. 设置最小高度（临时兜底方案） #

若无法等待字体加载，可给Masonry项目设置min-height，匹配自定义字体渲染后的高度，减少字体替换带来的尺寸波动。此方案需根据实际内容调整数值，灵活性较低。

.grid-item {
  min-height: 220px; /* 替换为实际字体渲染的高度值 */
}

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