Question

在我实现它时，看起来fullpage.js会自动将我的h1和其他字体font-weight更改为更大胆。我已经尝试在font-weight上添加！重要规则来覆盖它但到目前为止没有结果。我使用了Lato字体，在添加fullpage.js之前一切正常。

另一个问题是在欢迎网站上制作点是唯一可见的元素（现在还有页脚和导航）。页脚和导航（所有站点上的静态）不应出现在欢迎页面上，只能出现在其他站点上。帮助赞赏！

超链接： Workspace。当你向下滚动页面时，你可以检查字体。

代码：

HTML：

isNotNaN

CSS：

<!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>

Answer 1

听起来你在谈论the problem with Chrome and fonts when using translate3d transitions。

fullpage.js在使用默认情况下处于活动状态的选项'css3：true'时会使用它们。您始终可以将其设置为false，但性能会更差。

Answer 2

好的，我自己想出了问题。在我转换到使用fullpage.js之后，我做的Nooby错误不包括我的字体。抱歉打扰，谢谢你的回答！

Fullpage.js自动更改字体权重

2 个答案: