gpt4 book ai didi

html - 字体比预期的 Bootstrap 更粗

转载 作者:行者123 更新时间:2023-11-28 03:45:47 25 4
gpt4 key购买 nike

<!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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com