Question

<!DOCTYPE html>
<html>
   <head>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <!-- Optional theme -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
      <link rel="stylesheet" href="style.css" type="text/css">
      <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
      <meta charset="UTF-8">
      <title>Test</title>
   </head>
   <body>
      <div id="wrapper">
         <div id="sidebar-wrapper">
            <div class="sidebar-nav">
               <ul>
                  <li><a href="#">This is some test text</a></li>
               </ul>
            </div>
         </div>
      </div>
      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   </body>
</html>

那是我的HTML

html, body {
    width: 100%;
    height: 100%;
}

#sidebar-wrapper {
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: black;
}  

.sidebar-nav ul li a {
    display: block;
    color: white;
    font-family: "Open Sans", serif;
    font-size: 20px;
}

那是我的css

将Open Sans字体系列应用于 a 元素会更改字体，但它应该更薄时显示为粗体。

我也试过其他字体，它们看起来都比较大胆。

它应该如何：

它是怎么回事（这里看起来更有气泡）：

更新：https://jsfiddle.net/xzw2ssz5/

Answer 1

尝试将以下代码粘贴到自定义CSS文件中。

body {
    font-family: "Open Sans" !important;
}

通过导航到开发人员工具中的Network标签，然后选择检查字体，确保正确加载字体。

如果您不想在整个文档中应用字体，请尝试将!important放在font-family规则前面，如下所示：

.sidebar-nav ul li a {
    display: block;
    color: white;
    font-family: "Open Sans", serif !important;
    font-size: 20px;
}

请告诉我这是否适合您。

<强>更新

好吧，我已经把它搞定了。基本上，您尚未从Google字体库中选择任何font-weight。用这个替换你的<link>：

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

保留所需的字体粗细值并删除所有其他值。这就是为什么你无法改变它的字体重量。希望现在有所帮助。

Answer 2

您好我认为问题在于您调用css资源的顺序

在您的css样式表上移动Open Sans导入尝试此操作，或直接将css字体直接导入样式表。

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link rel="stylesheet" href="style.css" 
  type="text/css">

字体比预期的Bootstrap更大胆

2 个答案: