时间戳

首页 > 解决方案 > 添加 Google 字体似乎会破坏/禁用我的滚动快照设置

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

问题描述

我正在一个需要为投资组合项目提供整页滚动快照的网站上工作。我得到了 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，但我一次只能让一个工作......有什么想法吗？谢谢！

标签： cssscrollgoogle-fonts

解决方案

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

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

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

另一个 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;
}

推荐阅读