html - 为什么我的字体在 Bootstrap 导航中表现得很奇怪？

Question

我在此站点上使用的是 Bootstrap v3.2.0。在移动设备上，当导航折叠时，当我单击打开它时，字体不会立即正确。只有在导航完全打开后，字体才会“捕捉”到使用网络字体。我制作了一个视频，让您更好地理解。我现在无法发布代码，因为我知道这会有所帮助，但我想知道是否有人以前看过这个并且知道修复方法。如果需要，我可以稍后发布代码。谢谢!

Video Example of Issue

JSFiddle Code

HTML

<header>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button class="navbar-toggle" data-target=".navbar-collapse"
            data-toggle="collapse" type="button"><span class="sr-only">Toggle
            navigation</span> <span class="icon-bar"></span> <span class=
            "icon-bar"></span> <span class="icon-bar"></span></button>
            <a class="navbar-brand" href="/">Company Name</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">Products</a>
                </li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href=
                    "#">Locations <span class="caret"></span></a>

                    <ul class="dropdown-menu subNavLeft">
                        <li>
                            <a href="#">Location 1</a>
                        </li>

                        <li>
                            <a href="#">Location 2</a>
                        </li>

                        <li>
                            <a href="#">Location 3</a>
                        </li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href=
                    "#">Company <span class="caret"></span></a>

                    <ul class="dropdown-menu subNavLeft">
                        <li>
                            <a href="#">Our History</a>
                        </li>

                        <li>
                            <a href="#">Brands</a>
                        </li>

                        <li>
                            <a href="#">Contact Us</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#">Blog</a>
                </li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href=
                    "#">Media <span class="caret"></span></a>

                    <ul class="dropdown-menu subNavLeft">
                        <li>
                            <a href="#">Videos</a>
                        </li>

                        <li>
                            <a href="#">Logos</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#">Careers</a>
                </li>

                <li>
                    <a class="login" href="#">Login</a>
                </li>

                <li class="hidden-md">
                    <a class="socialIcon fbIcon fa fa-fw fa-facebook" href="#"
                    style="font-style: italic" target="_blank"></a>
                </li>

                <li class="hidden-md">
                    <a class="socialIcon fa fa-fw fa-twitter" href="#" style=
                    "font-style: italic" target="_blank"></a>
                </li>

                <li class="hidden-md">
                    <a class="socialIcon fa fa-fw fa-youtube" href="#" style=
                    "font-style: italic" target="_blank"></a>
                </li>
            </ul>
        </div>
    </div>
</header>

CSS

html {
    background:#000
}

body {
    margin:0;
    padding:0;
    font-family:'Georgia',serif;
    font-weight:400;
    font-style:normal;
    font-size:19px;
    color:#6f6666;
    background:#fff
}

a,a:visited {
    color:#c02037;
    text-decoration:none
}

a:hover {
    color:#c02037;
    text-decoration:underline;
    transition:.3s;
    -webkit-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -o-transition:.3s
}

header {
    position:fixed;
    top:0;
    right:0;
    left:0;
    z-index:999
}

.logo {
    float:left;
    margin:0 21px 0 30px;
    padding:0
}

.navbar {
    padding:17px 0;
    font-family:arial;
    -webkit-box-shadow:0 1px 6px rgba(0,0,0,0.1);
    -moz-box-shadow:0 1px 6px rgba(0,0,0,0.1);
    box-shadow:0 1px 6px rgba(0,0,0,0.1);
    border-bottom:1px solid #F1F1F1;
    behavior:url(/PIE.htc)
}

.navbar-default {
    background:#fff;
    border:none
}

.navbar-brand,.navbar-right {
    margin:0;
    padding:0
}

.collapse {
    margin-right:30px
}

.collapse .navbar-nav li a,.collapse .navbar-nav li a:visited {
    margin:0;
    padding:25px 19px 20px;
    font-size:18px;
    color:#6f6666;
    text-transform:uppercase;
    line-height:20px
}

.collapse .navbar-nav li a:focus,.collapse .navbar-nav li a:active {
    color:#c02037!important;
    background:none!important
}

.collapse .navbar-nav li a:hover {
    color:#c02037;
    text-decoration:none
}

.collapse .navbar-nav li a.login,.collapse .navbar-nav li a.login:visited {
    color:#c02037;
    padding:25px 40px 20px 20px
}

li.dropdown ul.dropdown-menu {
    box-shadow:none;
    top:82px;
    border-top:none
}

li.dropdown ul.dropdown-menu li a,li.dropdown ul.dropdown-menu li a:visited {
    padding:15px 20px!important;
    font-size:17px
}

li.dropdown ul.dropdown-menu li a:hover {
    background:none;
    text-decoration:none
}

.collapse .navbar-nav li a.socialIcon,.collapse .navbar-nav li a.socialIcon:visited {
    width:30px!important;
    height:30px!important;
    margin:16px 15px 0 0!important;
    padding:7px 0 0 1px!important;
    -webkit-border-radius:15px!important;
    -moz-border-radius:15px!important;
    border-radius:15px!important;
    background:#C5C3C3!important;
    text-align:center!important;
    display:block
}

.collapse .navbar-nav li a.socialIcon:hover {
    background:#c02037!important;
    text-decoration:none
}

.collapse .navbar-nav li a.socialIcon i {
    color:#fff
}

.subNavLeft {
    right:auto!important
}

.subNavLeft::before {
    left:12px!important;
    right:auto!important
}

.subNavLeft::after {
    left:13px!important;
    right:auto!important
}

/* -------------------------------- MEDIUM SIZE ---------------------------------- */
@media (min-width: 1024px) and (max-width: 1199px) {
    .collapse {
        margin-right:47px
    }

    .collapse .navbar-nav li a,.collapse .navbar-nav li a:visited {
        padding:25px 17px 20px
    }

    .collapse .navbar-nav li a.login,.collapse .navbar-nav li a.login:visited {
        padding:25px 0 20px 20px
    }
}

/* ------------------------------------ SMALL SIZE ----------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .navbar {
        padding:17px 0 32px
    }

    .navbar-toggle {
        margin:15px 30px 0 0
    }

    .collapse,navbar-collapse {
        margin:30px 0 0
    }

    .collapse .navbar-nav li a,.collapse .navbar-nav li a:visited {
        margin:0 0 0 30px;
        padding:21px 0 0;
        font-size:22px
    }

    .collapse .navbar-nav li a.login,.collapse .navbar-nav li a.login:visited {
        margin:0 0 0 30px;
        padding:23px 0 0
    }

    li.dropdown ul.dropdown-menu li a,li.dropdown ul.dropdown-menu li a:visited {
        padding:15px 20px 5px!important;
        font-size:20px
    }

    li.dropdown ul.dropdown-menu li a:hover {
        color:#c02037!important
    }

    .collapse .navbar-nav li a.socialIcon,.collapse .navbar-nav li a.socialIcon:visited {
        float:left;
        width:34px!important;
        height:34px!important;
        margin:16px 15px 0 0!important;
        padding:7px 0 0 1px!important;
        -webkit-border-radius:17px!important;
        -moz-border-radius:17px!important;
        border-radius:17px!important;
        background:#C5C3C3!important;
        text-align:center!important;
        display:block
    }

    .collapse .navbar-nav li a.socialIcon:hover {
        background:#c02037!important
    }

    .collapse .navbar-nav li a.fbIcon,.collapse .navbar-nav li a.fbIcon:visited {
        margin:16px 15px 0 30px!important
    }
}

/* ------------------------------------ X-SMALL SIZE ----------------------------------- */
@media (max-width: 767px) {
    .navbar {
        padding:17px 0 10px
    }

    .collapse,navbar-collapse {
        margin:11px 0 0
    }

    .collapse .navbar-nav li a,.collapse .navbar-nav li a:visited {
        margin:0 0 0 30px;
        padding:15px 0 7px;
        font-size:24px
    }

    .collapse .navbar-nav li a.login,.collapse .navbar-nav li a.login:visited {
        margin:0 0 0 30px;
        padding:18px 0 7px
    }

    li.dropdown ul.dropdown-menu li a,li.dropdown ul.dropdown-menu li a:visited {
        padding:15px 20px 5px!important;
        font-size:20px
    }

    li.dropdown ul.dropdown-menu li a:hover {
        color:#c02037!important
    }

    .collapse .navbar-nav li a.socialIcon,.collapse .navbar-nav li a.socialIcon:visited {
        float:left;
        width:44px!important;
        height:44px!important;
        margin:15px 15px 20px 0!important;
        padding:8px 0 0!important;
        -webkit-border-radius:22px!important;
        -moz-border-radius:22px!important;
        border-radius:22px!important;
        background:#C5C3C3!important;
        text-align:center!important;
        display:block;
        font-size:28px
    }

    .collapse .navbar-nav li a.socialIcon:hover {
        background:#c02037!important
    }

    .collapse .navbar-nav li a.fbIcon,.collapse .navbar-nav li a.fbIcon:visited {
        margin:15px 15px 20px 30px!important
    }

    .navbar-toggle {
        margin:5px 15px 0 0
    }
}

Answer 1

点击时观察检查器中的元素。单击此按钮时类正在更改或内联样式正在更改。如果是，那么您的问题出在您的 Javascript 中。

如果您喜欢打开时的最终字体，我建议您确保通过 CSS 而不是 JS 将字体放置在这些元素上。

如果你最后不喜欢这个字体，你可以删除正在做那个改变的 JS 部分

在查看您发布的非常有帮助的 fiddle 后，我发现字体没有改变。相反，如果我删除

.collapse .navbar-nav li a, .collapse .navbar-nav li a:visited {
    margin:0;
    color:#6f6666;
    line-height:20px;
    text-transform:uppercase;
    padding:25px 19px 20px 19px;
    font-size:18px;
}   

从

@media (max-width: 767px)

移除

    .collapse .navbar-nav li a, .collapse .navbar-nav li a:visited {
         margin: 0 0 0 30px;
         padding: 15px 0 7px 0;
         font-size: 24px;
    }

    .collapse, navbar-collapse {
         margin: 11px 0 0 0;
    }

打开折叠的导航后没有发生不需要的更改。如果你对它的外观没问题，你可以用其他方式使用它。您可以对折叠导航进行必要的更改以达到您想要的结果。

这是 fiddle