html - 字体比预期的 Bootstrap 更粗

标签 html css twitter-bootstrap twitter-bootstrap-3

<!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 元素会更改字体,但它看起来很粗,而实际上应该更细。

我也尝试过其他字体,它们看起来都更粗。

应该是这样的: enter image description here

怎么样(这里看起来比较起泡):

enter image description here

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

最佳答案

尝试将以下代码粘贴到您的自定义 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;
}

让我知道这是否适合您。

更新

好的,我已经启动并运行了。基本上,您没有选择任何 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">

保留您想要的字体粗细值并删除所有其他值。这就是您无法更改其字体粗细的原因。希望现在有所帮助。

关于html - 字体比预期的 Bootstrap 更粗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43984831/

相关文章:

html - 获取指定宽度的表格行以将所有内容保持在一行上并根据需要截断一个单元格? (HTML/CSS)

php - 下拉多页内容

javascript - Bootstrap 导航栏默认选项卡显示

css - Bootstrap col-md-x 嵌套在 col-md-x 中

php - Jquery 切换 .. 固定对齐

jquery - 通过 AJAX 加载另一个 HTML 然后替换自身的 HTML 文件

Javascript:通过单击 div child 更改可见性

javascript - 将图例拖出 Highchart

html - 导航栏中的子菜单 : li's width doesn't fit the text length

html - 如何/在何处将 Angular 和 Bootstrap .js 文件导入到我的 index.html 中?