个人中心
gpt4 book ai didi

jquery - Fullpage.js 自动改变字体粗细

转载 作者：行者123 更新时间：2023-11-28 16:51:01 25 4
gpt4 key购买 nike

看起来 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/

25 4 0
文章推荐： Python:检测重新定义？
文章推荐： Python，网页似乎没有看到我的所有数据并且没有提供正确答案？
文章推荐： python - 如何对 Django 查询集进行自定义排序？
文章推荐： python - 为多个 OS X 版本构建二进制 python 发行版
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com