添加 Google 字体似乎会破坏/禁用我的滚动快照设置答案

【问题标题】：Adding a Google Font seems to break/disable my scroll-snap setup添加 Google 字体似乎会破坏/禁用我的滚动快照设置
【发布时间】：2019-08-28 20:27:45
【问题描述】：

我正在开发一个需要为投资组合项目提供整页滚动快照的网站。我得到了 snap-scroll 和 HTML smooth-scroll 设置并且工作正常。然后，我在 HTML 中添加了指向 Google 字体的链接，并在 CSS 中为该字体设置了一些文本。字体按预期显示，但似乎禁用了滚动捕捉行为。

我尝试了多种 Google 字体，每次都得到相同的结果。似乎只有在正确安装字体时才会禁用滚动捕捉。

HTML...

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css">

CSS 下面...

body{
    scroll-snap-type: y mandatory;
    color: #222;
}

.tech-list-header {
    font-size: 1.333em;
    font-family: 'IBM Plex Sans';
}

#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    /* background-repeat: no-repeat; */
    background-size: cover;
    margin: 0px -10px;
    position: relative;
    min-height: 90vh;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

似乎我应该能够同时使用 Google 字体和 Scroll-Snap，但我一次只能使用一个……有什么想法吗？谢谢！

【问题讨论】：

我也遇到过这个，看起来很奇怪。它似乎也发生在 Chrome 和 Firefox 中，在我看来，这似乎是 Google 字体的问题，而不是浏览器错误。对 Google Fonts 的调用只是一个简短的样式表，其中似乎没有任何与滚动捕捉冲突的内容。

标签： css scroll google-fonts

【解决方案1】：

这里有一个类似的问题有答案：https://stackoverflow.com/a/52886080/1173898

但是，解释一下 - 根本问题似乎是 scroll-snap-type 和 @font-face 声明之间的冲突。当您链接到 Google 字体时，您所链接的只是一个简短的 CSS 文件，该文件由一个或两个 @font-face 声明组成。

具体来说问题在于任何带有src: 规则和url(...) 值的@font-face 声明。不幸的是，这几乎是所有时间，这包括 Google 字体样式表。

另一个 SO 答案提到它只是 Chrome。但是，我在 Firefox 中看到了同样的错误行为。

正如另一个 SO 答案中提到的那样，解决方法是在 <body> 内添加一个包装器元素，如下所示：

<body>
  <div class="wrapper">
    <div id="#bgimg-1">
    <div id="#bgimg-2">
    <div id="#bgimg-3">
  </div>
</body>

CSS

.wrapper {
    scroll-snap-type: y mandatory;
}

...

#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
    ...
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

【讨论】：