您的位置:首页 > DIV CSS基础 > 正文

font-weight 【CSS加粗】粗体(bold normal)教程

div css font-weight加粗(bold normal)样式教程篇

HTML布局中除了使用b标签strong标签对文字直接实现加粗样式,在CSS加粗样式属性中 font-weight也是实现布局中文字加粗效果样式。

一、认识font-weight语法与结构

1、font-weight
用于设置对象内文字加粗或不加粗。

2、font-weight语法与结构
font-weight语法:
font-weight : normal | bold| bolder | lighter | number

.abc{font-weight:bold} 

设置class=abc对象内的文字为加粗显示样式。

font-weight值参数介绍:
normal : 正常的字体。相当于number为400。声明此值将取消之前任何加粗或本身加粗样式效果,不加粗作用
bold : 粗体。相当于number为700。也相当于html b 加粗对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

3、font-weight推荐使用值
font-weight 可设置具体100-900的数字为加粗值,但由于浏览器兼容问题,对不同数字解释显示加粗情况不同,一般设置400以上加粗效果才显示出,一般不推荐使用。

加粗推荐使用bold值:
font-weight:bold

不加粗(去掉加粗)推荐使用normal值
font-weight:normal
实现不加粗去掉加粗样式,比如b\strong\h1\h2等标签默认情况是加粗字体,对这类标签设置font-weight:normal后将实现这类标签内文字不再是加粗样式。

4、font-weight设置值的对应解释图

css font-weight对应值分析图
css font-weight对应值分析图

二、HTML加粗标签和CSS加粗样式两个加粗认识

1、HTML加粗标签
在HTML中对文字直接加粗可以使用<b>或<strong>标签来实现。两个加粗标签用法效果相同,根据需求选择。

<b>我在b标签内被加粗</b> 
<strong>我在strong标签内被加粗</strong>

html b和strong加粗HTML代码与加粗效果截图
html b和strong加粗HTML代码与加粗效果截图

2、CSS加粗font-weight样式
除了HTML标签来实现文字字体加粗,后来CSS也可以实现文字加粗样式,并且也兼容各大浏览器,也就是font-weight加粗样式,如果要对对象文字加粗只需要对对象设置font-weight:bold即可实现粗体。

三、html标签粗体、font-weight粗体样式实例

1、加粗粗体实例介绍
ThinkCSS通过b标签、strong标签实现文字粗体加粗;又对div class=abc内文字设置font-weight bold加粗;又对h3标签取消默认加粗(不加粗)样式使用font-weight normal实现。

2、font-weight取消粗体与font-weight加粗、html标签加粗实例代码

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>font-weight教程实例 在线演示 ThinkCSS</title>
<style>
.abc{ font-weight:bold}
/* 设置粗体 */

.noweight{ font-weight:normal}
/* 取消加粗 */

</style>
</head>

<body>
我是正常字<br>
<b>我在b标签内被加粗</b><br />
<strong>我在strong标签内被加粗</strong>
<div class="abc">我在DIV内设置font-weight:bold加粗</div>
<h3>我在h3标签内默认是加粗的</h3>
<h3 class="noweight">我在h3标签内 设置font-weight:normal取消加粗</h3>
</body>
</html>

html加粗与css加粗和CSS不加粗实例代码。

3、font-weight加粗 font-weight不加粗实例截图

font-weight加粗与不加粗,html加粗标签实例截图
div css font-weight加粗与不加粗,html加粗标签实例截图

4、font-weight在线演示与打包下载

div+css font-weight实例在线演示

查看案例

加粗 不加粗实例打包下载

四、font-weight总结

我们什么时候选择HTML标签加粗,什么时候使用font-weight bold加粗,这个没有死规定的,一般对标签里全部文字设置粗体使用css font-weight加粗样式比较简单,如果一段文字里某些字加粗,可以选择B或strong标签进行加粗。在布局过程中b strong和font-weight都不能丢,不要学习font-weight加粗就不用或抛弃html粗体这样是错误的。有时适当使用b或strong加粗有利于SEO优化,同时有时直接使用HTML标签加粗便于布局,所以在实践中不断总结什么时候用CSS加粗什么时候用HTML加粗,根据需求和经验来选择加粗方式。

相关标签: 加粗 粗体
如需转载,请注明文章出处和来源网址:https://www.thinkcss.com/css/882.shtml

日期:2016-06-02 16:51 www.thinkcss.com div+css