爲什麼我的字體在引導程序nav上表現怪異？

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的即拍即改變

審查您發佈的小提琴，這是非常有益之後的部分，我發現字體沒有改變。相反，如果我刪除

.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; 
    } 

有沒有不必要的變化打開摺疊導航後發生。如果你看起來很好，你可以使用其他方式。您可以對您的colapse nav進行必要的更改以實現預期的結果。

這裏是fiddle