字体比预期的粗体Bootstrap
字体比预期的粗体Bootstrap
提问于 2017-05-16 00:45:40
<!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元素会更改字体，但它看起来是粗体，而实际上它应该更细。
我也尝试过其他字体，它们看起来都比较粗体。
它应该是什么样子：
它是怎样的(在这里它看起来更有气泡)：
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-05-16 01:12:01
尝试将以下代码粘贴到自定义CSS文件中。
body {
font-family: "Open Sans" !important;
}并确保您的字体被正确加载，方法是导航到开发人员工具中的Network选项卡，然后选择checking the fonts。
如果您不想在整个文档上应用字体，请尝试将!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">保留您想要的字体粗度值，并删除所有其他值。这就是为什么你不能改变它的字体粗细。希望现在能有所帮助。
Stack Overflow用户
发布于 2017-05-16 01:15:58
嗨，我想问题出在你调用css资源的顺序上
将Open Sans导入移到css样式表的顶部，尝试一下，或者直接将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">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43984831
复制相关文章
相似问题