用CSS如何让列表字体变粗?
发布网友
共4个回答
懂视网
在前端页面的开发中，字体文字的效果是一个重要的部分，有时为了突出一段文字，就需要给字体文字进行加粗显示；那么使用css如何给字体加粗？本篇文章就给大家介绍css设置字体加粗样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
首先我们通过简单的代码示例，为大家详细解说关于css给字体加粗的实现方法！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 字体加粗</title>
<style>
.a1{
font-weight:bold;
}
.a2{
font-weight:bolder;
}
</style>
</head>
<body>
<div>
<p>这是一段测试文字<br />
<span class="a1">这里使用bold属性值加粗字体</span><br />
<span class="a2">这里使用bolder属性值加粗字体</span>
</p>
</div>
</body>
</html>我们来看看效果图：
通过示例，可以知道：这里实现字体加粗效果主要用到了css中的font-weight:bold;和font-weight:bolder;的样式属性。我们应该知道font-weight属性可以设置文本字体的粗细，而设置bold属性值可以定义粗体字符，bolder属性值可以定义更粗的字符，进而实现字体加粗效果。
在css font-weight属性中不仅仅只有bold属性值和bolder属性值可以加粗字体，还设置数值来加粗字体，我们来看看效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 字体加粗</title>
<style>
.a1{
font-weight:bold;
}
.a2{
font-weight:800;
}
</style>
</head>
<body>
<div>
<p>这是一段测试文字<br /><br />
<span class="a1">这里使用bold属性值加粗字体</span><br /><br />
<span class="a2">这里使用数值加粗字体</span>
</p>
</div>
</body>
</html>效果图：
说明：
font-weight属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal（标准字体），700 等价于 bold（粗体）。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。
总结：
热心网友
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<script>标签中，输入js代码：
$('td').click(function () {
$('td').css('font-weight', 'normal');
$(this).css('font-weight', 'bold');
});
3、浏览器运行index.html页面，点击“我是A”，此时字体会变粗。
4、再点击“我是B”，此时“我是A”的字体粗度恢复正常，“我是B”的字体变粗。
热心网友
css中字体加粗使用font-weight，其属性是设置文本的粗细。
font-weight的属性值有3种指定方法：
1、关键字法，关键字包括“normal”和“bold”两个。
比如：font-weight:bold;
2、相对粗细值法，相对粗细也是由关键字定义，但是它的粗细是相对于上级元素的继承值而言的，包括“bolder”和“lighter”两个。
3、数字法，包括从“100”到“900”的9个数字序列（注意，只能是100、200之类的整百数）。这些数字序列代表从最细（100）到最粗（900）的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。比如：font-weight:700;
4、例子：以下代码实现点击不同文字，字体变粗的简单的特效：
<table><tr><td id="a" onclick="g(0);">点我变粗体A</td></tr>
<tr><td id="b" onclick="g(1);">点我变粗体B</td></tr>
</table>
<script>
function $(v){return document.getElementById(v);}
function g(x){
if (x==0){$("a").style.fontWeight="bold";$("b").style.fontWeight="normal";}else{$("b").style.fontWeight="bold";$("a").style.fontWeight="normal";}
}
</script>
热心网友
这个问题，如果单纯用CSS是不可能完成的，只能用JS完成（北京八方永信教育）追问JS也可以的，只要能解决就可以了
追答那我用JQ简单给你写一个吧！
$(document).ready(function(){
$("tr:first").click(function(){
$("tr:first td").css("font-weight","bold");
$("tr:last td").css("font-weight","");
});
$("tr:last").click(function(){
$("tr:first td").css("font-weight","");
$("tr:last td").css("font-weight","bold");
});
});
