css怎么设置字体加粗样式?(代码详解)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

在前端页面的开发中,字体文字的效果是一个重要的部分,有时为了突出一段文字,就需要给字体文字进行加粗显示;那么使用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怎么设置字体加粗样式?(代码详解)

通过示例,可以知道:这里实现字体加粗效果主要用到了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>

效果图:

css怎么设置字体加粗样式?(代码详解)

说明:

font-weight属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal(标准字体),700 等价于 bold(粗体)。每个数字值对应的字体加粗必须至少与下一个最小数字一样细,而且至少与下一个最大数字一样粗。

总结:以上就是本篇文章所介绍的设置字体加粗样式的全部方法,大家可以自己动手尝试,加深理解,根据需要在不同情况给css font-weight属性设置不同的值来给字体加粗。希望能对大家的学习有所帮助,更多相关教程请访问: CSS基础视频教程, HTML视频教程,bootstrap视频教程!

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » css怎么设置字体加粗样式?(代码详解)

发表评论

提供最优质的资源集合

立即查看 了解详情