小编Ben*_*vin的帖子

我知道它仍然是非常新的和试验性的，但是一直在使用css滚动快照，并且暂时无法使它工作。

我最终意识到，虽然我在CSS中使用@ font-face，但是滚动捕捉不起作用。如果我将字体系列更改为“ Arial”而不是我定义的字体，则效果很好。

还有其他人遇到吗？

Codepen：https：//codepen.io/galvinben/pen/LgzLxK

@font-face {
  font-family: 'fontName';
  src: url('https://fontlibrary.org/assets/fonts/bebas/b98870e552991cf3daa1031f9fb5ec74/4c8d42e69711e4e230d9081694db00ce/BebasNeueLight.otf')
}

body {
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y proximity;
  font-family: 'fontName';
}

.section {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


#one {
  background-color: #222;
}

#two {
  background-color: #333;
}

#three {
  background-color: #444;
}

#four {
  background-color: #555;
}

（更改字体系列后，可能必须刷新页面才能看到它是否工作。）