Fullpage.js автоматически изменяет вес шрифта

1

Похоже, что fullpage.js автоматически менял свой h1 и другие шрифты шрифта на более смелый, когда я его реализовал. Я попытался добавить важное правило на шрифт-вес, чтобы переопределить его, но пока никаких результатов. Я использую шрифт Lato, и все работает отлично, прежде чем я добавлю fullpage.js.

Другое дело - сделать точку на приветственном сайте единственным видимым элементом (теперь есть нижний колонтитул и навигация). Нижний колонтитул и навигация (статические на всех сайтах) не должны появляться на странице приветствия, только на остальных сайтах. Помогите оценить!

Гиперссылка: рабочее пространство. Вы можете проверить шрифты, когда u прокрутите страницу вниз.

КОД:

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;
    }
}
Теги:
fullpage.js

2 ответа

1

Похоже, вы говорите о проблеме с Chrome и шрифтами при использовании переходов translate3d.

fullpage.js использует их при использовании опции "css3: true", которая по умолчанию активна. Вы всегда можете установить значение false, но производительность будет хуже.

Поделиться
0

Хорошо, я сам разобрался с проблемой. Ошибка Nooby, которую я сделал, не включала мой шрифт после того, как я перешел на использование fullpage.js. Извините за беспокойство, спасибо за ответ!

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню