视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML和CSS实现字体加粗的三种方法
2020-11-27 15:22:52 责编:小采
文档
 大家在浏览网站时有没有注意到,页面中有些文字或字体加粗了,正在学习HTML和CSS的小伙伴,你知道HTML如何给文字加粗吗?CSS怎么设置字体加粗呢?这篇文章给大家总结了给字体和文字加粗的三种方法,包括HTML中的加粗标签以及CSS字体加粗样式,有一定的参考价值,感兴趣的朋友可以参考一下。

给字体和文字加粗有三种方法,一种是CSS中的font-weight: bold样式,一种是HTML中的<strong></strong>标签,最后一种是HTML中的<b></b>标签。

方法1:用CSS中font-weight: bold样式给字体加粗

font-weight属性可以设置字体的粗细,当属性值为normal时,表示正常的字体,相当于number为400;当属性值为bold时,可以给字体粗体,相当于number为700,也相当于<b>标签的效果。

实例描述:创建两个p标签,给其中一个标签一个class类名,便于对其进行CSS样式设置。将font-weight: bold属性添加到有类名的p 标签上,对比两个p标签,看看有什么不同,具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{font-weight: bold;}
</style>
</head>
<body>
<p>床前明月光</p>
<p class="aa">低头思故乡</p>
</body>
</html>

如下图所示,“低头思故乡”这段文字被加粗了。

方法2:用html中的<strong>加粗标签

<strong>标签可以使字体加粗,且所有主流浏览器都支持此方法。

实例描述:直接用html中的<strong>标签,即可实现文字加粗效果,具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<strong>疑是地上霜</strong>
</body>
</html>

如图所示,对比p标签和strong标签的内容,发现strong标签的内容加粗了。

方法3:用html中的<b>加粗标签

<b> 标签可以定义一个粗体的文本,且所有主流浏览器都支持 <b> 标签。

实例描述:<b></b>标签和<strong>标签一样,都可以给文字加粗,并且使用简单方便,具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<b>举头望明月</b>
</body>
</html>

如下图所示,b标签的里面的文字加粗了

总结:以上给大家介绍了给文字加粗的三种方法,分别是CSS中的font-weight: bold样式和HTML中的<strong>标签、<b>标签,直接用html标签比较方便,至于选择哪种方法,还要看个人习惯和工作需要,希望这篇文章对你有所帮助!

【相关教程推荐】

1、html和CSS给文字添加删除线的三种方法(图文)

2. HTML教程

3. HTML在线手册

下载本文
显示全文
专题