看起来 fullpage.js 在我实现时自动将我的 h1 和其他字体字体粗细更改为更粗。我试过在 font-weight 上添加 !important 规则来覆盖它，但到目前为止没有结果。我使用的是 Lato 字体，在我添加 fullpage.js 之前一切正常。
另一件事是让欢迎站点上的点成为唯一可见的元素(现在还有页脚和导航)。页脚和导航(在所有网站上都是静态的)不应出现在欢迎页面上，而应出现在其余网站上。帮助赞赏!
超链接: Workspace .您可以在向下滚动页面时检查字体。
代码:
HTML:
<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
<script src="js/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/fullPage.js-master/jquery.fullPage.min.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: true,
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
resize : false,
sectionsColor : ['#fff'],
paddingTop: '',
paddingBottom: '',
fixedElements: '#main-nav, #main-footer',
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});
</script>
</head>
<body>
<div id="fullpage">
<div class="section">
<div class="wrapper">
<a href="hello.html"><img id="dot" class="wrapper__dot" src="images/random_pulsing_dot.svg" alt="Click to enter site"></a>
</div>
</div>
<div class="section">
<nav id="main-nav" class="side-bar__nav">
<ul>
<li><a href="hello.html" class="nav__link current">hello</a><img class="small_dot pink" src="images/link_dot_small_pink.svg"></li>
<li><a href="zespol.html" class="nav__link">zespół</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="onas.html" class="nav__link">o nas</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="misja.html" class="nav__link">misja</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="oferta.html" class="nav__link">oferta</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="wspolpraca.html" class="nav__link">współpraca</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="brief.html" class="nav__link">wypełnij brief</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
<li><a href="kontakt.html" class="nav__link">kontakt</a><img class="small_dot black" src="images/link_dot_small_black.svg"></li>
</ul>
</nav>
<div class="main-container">
<h1 class="main-header">Hipster Ipsum Amet.</h1>
</div>
<footer id="main-footer">
<h2 class="footer__text">dolor.</h2>
</footer>
</div>
</div>
</body>
</html>
CSS:
html {
width:100%;
height:100%;
}
body {
height: 100%;
width: 100%;
margin:0 auto;
padding: 0;
font-size: 1em;
}
* {
box-sizing: border-box;
-webkit-font-feature-settings: "liga" 0;
font-variant-ligatures: none;
-webkit-font-variant-ligatures: no-common-ligatures;
}
/*
* index.html page
*/
.wrapper {
position: absolute;
max-width: 45%;
max-height:45%;
top:50%;
left:50%;
}
#dot {
position:relative;
max-width:100%;
max-height:100%;
margin-top:-50%;
margin-left:-50%;
}
/* Dot animation */
@keyframes pulse {
from {
width: 70px;
height: 70px;
}
to {
width: 90px;
height: 90px;
}
}
#dot {
animation: pulse 1200ms ease-in-out infinite alternate;
}
/*
* Hello.html Page
*/
.main-container {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
/*
* before/after img inline
* Navigation
*/
.nav__link a{
visibility: hidden;
}
.small_dot {
vertical-align:middle;
padding-left: 10px;
}
.side-bar__nav{
position: absolute;
padding: 10px;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.side-bar__nav ul li{
list-style: none;
text-align: right;
margin-right: 50px;
padding-top: 15px;
}
.side-bar__nav ul li img {
margin-bottom: 5px;
}
.small_dot:hover {
}
.side-bar__nav a {
text-decoration: none;
color: rgba(0,0,0,0);
font-family: 'Lato', sans-serif;
font-size: 1.1em;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
.side-bar__nav:hover a {
color: rgba(0, 0, 0, 1);
}
.main-header {
text-align: center;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.footer__text {
text-align: center;
}
.languages {
}
/*
* Typography
*/
h1 {
font-weight: 100;
font-size: 5.5em;
font-family: 'Lato', sans-serif;
}
h2 {
font-family: 'Noto Serif', serif;
font-weight: 700;
font-size: 3.5em;
}
img {
max-width: 100%;
}
@media (max-width: 600px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
.side-bar__nav {
display: none;
}
}
@media (max-width: 1228px) {
.side-bar__nav {
display: none;
}
}
最佳答案
听起来你在谈论 the problem with Chrome and fonts when using translate3d transitions .
fullpage.js 在使用默认情况下处于事件状态的选项 'css3:true' 时使用这些。您始终可以将其设置为 false，但性能会更差。
关于jquery - Fullpage.js 自动改变字体粗细，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32669995/