这篇文章主要介绍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(粗体)。每个数字值对应的字体加粗必须至少与下一个最小数字一样细,而且至少与下一个最大数字一样粗。
以上是css如何设置字体加粗样式的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。