<!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 元素会更改字体,但它看起来很粗,而实际上应该更细。
我也尝试过其他字体,它们看起来都更粗。
怎么样(这里看起来比较起泡):
最佳答案
尝试将以下代码粘贴到您的自定义 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/