Question

我正在一个需要对项目组合项进行整页滚动快照的网站。我设置了快速滚动和HTML平滑滚动，并且工作正常。然后，我在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，但是一次只能工作一个……有什么想法吗？谢谢！

Answer 1

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

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

具体地说，问题是任何带有@font-face规则和src:值的url(...)声明。不幸的是，几乎所有时间都在使用，其中包括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;
}

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

1 个答案: