在Firefox

啓用黑體-抵達Neue-光在引導導航欄

我有以下代碼：在Firefox

.navbar.navbar-inverse .navbar-brand { 
 
     font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light"; 
 
     font-weight: bold; 
 
     color: #fff; 
 
     margin-bottom:0px !important; 
 
    } 
 

 

 
.navbar.navbar-inverse .navbar-nav > li > a { 
 
     font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light"; 
 
     color: #fff; 
 
     margin-bottom:0px !important; 
 
     background: #222222; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
     </div> 
 
     <div> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">About</a> 
 
      </li> 
 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Help</a> 
 
       </li> 
 
       <li><a href="#">Contact/a> 
 
       </li> 
 

 
      </ul> 
 
      </li> 
 
      <li><a href="#">Page 2</a> 
 
      </li> 
 
      <li><a href="#">Page 3</a> 
 
      </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a> 
 
      </li> 
 
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <div class="container"> 
 
    <h3>Right Aligned Navbar</h3> 
 
    <p>some text.</p> 
 
    </div> 
 

 
</body> 
 

 
</html>

在Firefox它錯誤地呈現：

但在其他瀏覽器（Chrome，Safari）中顯示正確：

如何在Firefox中正確啓用Helvetica Neue Light？

來源

2015-09-28 neversaint

試試這個，它似乎對我有用。

a { 
 
    font-family: "Helvetica Neue", Helvetica, sans-serif; 
 
    font-weight: 300; 
 
}

<a href="#">Helvetica Neue (Light)</a>

我認爲字體是默認情況下只在OS X，iOS設備可用。您可能需要使用TypeKit才能獲取適當的Web字體工具包以適用於所有人。

來源

2015-09-28 01:35:32 Stickers

我還加黑體和無襯線的回退，很明顯，你需要將這些樣式應用到你的真實class和id選擇。我僅使用'a'標籤作爲示例。那麼，你有這麼高的代表，所以我不打算添加更多的細節，問題是如何使用字體，而不是Bootstrap或導航欄等，但隨時評論任何進一步的問題。 – Stickers

在你的主題style.css有多個實例：FONT-FAMILY：helveticaneue;由於Helvetica Neue字體是不是一個標準的Web安全字體，因爲它的命名可以根據系統的變化，你可能需要使用更多的東西一樣：FONT-FAMILY：「Helvetica Neue字體」，「HelveticaNeue」，黑體，宋體，無襯線;當使用非網頁安全字體時，如果字體不可用，提供合適的替代品總是很好的。

另一種替代方法是使用web字體@font-face就可以提供的字體。

希望有幫助！

來源

2015-09-28 01:52:06

回答

相關問題