Looks like fullpage.js automatically changed my h1 and other fonts font-weight to bolder when I implemented it. I've tried adding !important rule on font-weight to override it but no results so far. I'm using Lato font and everything worked perfectly fine before I added fullpage.js.
看起来像fullpage.js在我实现它时自动将我的h1和其他字体font-weight更改为更大胆。我已经尝试在font-weight上添加！重要规则来覆盖它但到目前为止还没有结果。我使用的是Lato字体，在添加fullpage.js之前，一切都运行得很好。
Another matter is making dot on the welcome site the only element visible (now there are footer and navigation also). Footer and navigation (static on all sites) shouldn't appear on the welcome page, only on the rest of the sites. Help appreciated!
另一个问题是在欢迎网站上制作点是唯一可见的元素（现在还有页脚和导航）。页脚和导航（所有站点上的静态）不应出现在欢迎页面上，仅显示在其他站点上。帮助赞赏！
Hyperlink: Workspace. You can check fonts when u scroll down a page.
超链接：工作区。当您向下滚动页面时，您可以检查字体。
CODE:
码：
HTML:
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:
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;
}
}
2 个解决方案
#1
1
Sounds like you are talking about the problem with Chrome and fonts when using translate3d transitions.
听起来你正在谈论使用translate3d过渡时Chrome和字体的问题。
fullpage.js makes use of those when using the option 'css3:true' which is active by default. You can always set it to false, but performance will be worse.
fullpage.js在使用默认情况下处于活动状态的选项'css3：true'时会使用它们。您始终可以将其设置为false，但性能会更差。
#2
0
Ok I figured out the problem by myself. Nooby mistake I made was not including my font after I made transition to use fullpage.js. Sorry for bothering, thanks for answer!
好的，我自己想出了问题。在我转换到使用fullpage.js之后，我做的Nooby错误不包括我的字体。抱歉打扰，谢谢你的回答！
#1
1
Sounds like you are talking about the problem with Chrome and fonts when using translate3d transitions.
听起来你正在谈论使用translate3d过渡时Chrome和字体的问题。
fullpage.js makes use of those when using the option 'css3:true' which is active by default. You can always set it to false, but performance will be worse.
fullpage.js在使用默认情况下处于活动状态的选项'css3：true'时会使用它们。您始终可以将其设置为false，但性能会更差。
#2
0
Ok I figured out the problem by myself. Nooby mistake I made was not including my font after I made transition to use fullpage.js. Sorry for bothering, thanks for answer!
好的，我自己想出了问题。在我转换到使用fullpage.js之后，我做的Nooby错误不包括我的字体。抱歉打扰，谢谢你的回答！