添加Google字体似乎会破坏/禁用我的滚动捕捉设置
我在一个网站上工作，需要为投资组合项目全页滚动快照。我设置了snap-scroll和HTML smooth-scroll，并且工作正常。然后，我在HTML中添加了一个指向Google字体的链接，并在CSS中为该字体设置了一些文本。字体按预期显示，但似乎禁用了滚动捕捉行为。
我尝试了多种谷歌字体，每次都有相同的结果。似乎只有当字体安装正确时，它才会禁用滚动捕捉。
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，但我一次只能使用一个……有什么想法吗？谢谢!
回答 1
Stack Overflow用户
发布于 2019-06-25 10:24:12
这里有一个类似的问题和答案：https://stackoverflow.com/a/52886080/1173898
但是，要阐明这一点-根本问题似乎是scroll-snap-type和@font-face声明之间的冲突。当您链接到Google字体时，您所链接的只是一个由一个或两个@font-face声明组成的简短CSS文件。
具体地说，该问题与具有src:规则和url(...)值的any @font-face声明有关。不幸的是，这是几乎所有的时间，这包括谷歌字体样式表。
另一个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;
}https://stackoverflow.com/questions/55560717
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号