Question

这是网站：

www.wearethefirehouse.com/phasetest

如果你慢慢滚动，你会发现，一旦菜单栏完全不透明，nav li项目都会从Enzo 300（从页面加载时看到没有导航背景）跳到Enzo 600。如果这是一个完整的重量级别，但很难说这个尺寸，但它们肯定会变胖。

仍然不确定我最终会在美学水平上使用它，但我怎么能阻止它转换到更胖的重量？在所有与导航相关的CSS中，（除非我遗漏了一些东西），我只使用font-weight: 600，而不是300.所以它应该是全部300或全部600，转换前和转换后。

.navbar-default {
    border-color: transparent;
    background-color: #222;
}

.navbar-default .navbar-brand {
    font-family: "ff-enzo-web", sans-serif;
    font-size: 18px;
    color: #FC6C00;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
    color: #fec503;
}

.navbar-default .navbar-collapse {
    border-color: rgba(255,255,255,.02);        
}

.navbar-default .navbar-toggle {
    border-color: #FC6C00;
    background-color: #FC6C00;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #FC6C00;
}

.navbar-default .nav li a {
    text-transform: uppercase;
    font-family: "ff-enzo-web",sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    transition: color .5s ease;
}

.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
    outline: 0;
    color: #FC6C00;
    font-size: 16px;
    font-weight: 600;
}

.navbar-default .navbar-nav>.active>a {
    border-radius: 0;
    color: #363636;
    background-color: #FC6C00;
    font-weight: 600;
}

.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #FFFFFF;
    background-color: #FC6C00;
    font-weight: 600;
}

注意：我所拥有的任何其他与导航相关的CSS只是为了响应断点而对上述内容进行调整，但问题是全宽存在，所以我不认为就是这样。

Answer 1

我认为问题不在此代码中

我也认为问题不在于字体重量

问题是你改变你的标题，它的填充消失，试着检查出来......

抱歉，如果没有帮助

Answer 2

我没有看到滚动中的字体有任何重量变化，但是我确实注意到当导航栏缩小时由于填充更改导致的突然跳转，似乎你有一个转换到位但是对于padding属性不起作用因为没有用它指定持续时间。

调整到.navbar-default块使得转换适用于padding和bg颜色，请注意填充后添加的时间延迟 -

transition: padding 0.5s, background-color .7s ease-in-out;

当基础CSS转换完成时，字体权重会向上移动

2 个答案: