捕获.JPG
font-weight：字体粗细
字体加粗可以用<b>和<strong>之外，还可以用css来实现，但css是没用语义（只仅仅是样式）的
说明：
设置或检索对象中文本字体的粗细
取值：
1.normal： 正常字体，相当于数值400
2.bold：粗体，相当于数值700
3.bolder：定义比继承性更重些得值
4.lighter：定义比继承性更轻些的值
5.integer:用数字体来表示文本字体粗细，取值范围：100、200、300、400、500、600、700、800、900（100的整数）
6.inherit：规定应该从父元素继承字体的粗细
例如：将“该属性用于设置字号”加粗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2 {
font-size:40px;
color:red;
font-family:宋体;
}
h4 {
font-size:18px;
color:purple;
}
span{
font-weight:bold; /*字体加粗效果*/
}
</style>
</head>
<body>
<h2>css介绍</h2>
<h4>font-size字号属性</h4>
<p><span>该属性用于设置字号</span>，该属性的值可以使用相对长度单位，也可以设置为绝对长度单位</p>
</body>
</html>
140.png
数值400相当于normal
数值700相当于bold
但我们更喜欢用数字来表示
补充：
strong可以加粗 ，但是它可以粗体可以不加粗
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2 {
font-size:40px;
color:red;
font-family:宋体;
}
h4 {
font-size:18px;
color:purple;
}
span{
font-weight:bold; /*字体加粗效果*/
}
</style>
</head>
<body>
<h2>css介绍</h2>
<h4>font-size字号属性</h4>
<p><span>该属性用于设置字号</span>，<strong>该属性的值可以使用相对长度单位</strong>，也可以设置为绝对长度单位</p>
</body>
</html>
14073867-906db28e55dffed8.png
接着是strong加入css样式后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2 {
font-size:40px;
color:red;
font-family:宋体;
}
h4 {
font-size:18px;
color:purple;
}
span{
font-weight:bold; /*字体加粗效果*/
}
strong{
font-weight:normal;
}
</style>
</head>
<body>
<h2>css介绍</h2>
<h4>font-size字号属性</h4>
<p><span>该属性用于设置字号</span>，<strong>该属性的值可以使用相对长度单位</strong>，也可以设置为绝对长度单位</p>
</body>
</html>
image.png
所以说strong标签好处就在可以实现使字体不变粗。
font-style：定义文字的风格
说明：
设置或检索对象中的文本字体样式
字体倾斜除了<i><em>（更多用在使斜体变得不斜体）外，还可以用css样式来实现
属性：
1.normal：正常的字体
2.italic：文本样式为斜体
3.oblique ：显示一个倾斜的字体（几乎不用）
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2 {
font-size:40px;
color:red;
font-family:宋体;
}
h4 {
font-size:18px;
color:purple;
font-style:italic; /*让字体倾斜*/
}
span{
font-weight:bold; /*字体加粗效果*/
}
strong{
font-weight:normal;
}
</style>
</head>
<body>
<h2>css介绍</h2>
<h4>font-size字号属性</h4>
<p><span>该属性用于设置字号</span>，<strong>该属性的值可以使用相对长度单位</strong>，也可以设置为绝对长度单位</p>
</body>
</html>
image.png
ps：我们通常不使字体变倾斜，而是让倾斜变得正常
font综合设置字体样式（重点）
当我们在写font-famliy 、font-style……会觉得很麻烦，所以我们就可以用
{font：font-style font-weight font-size/line-height font-family;}这种方式来写
但是要注意：
1.必须要按照上面的语法格式来写，不能更换顺序，各个属性以空格隔开
2.不需要的属性可以省略（取默认值）但是必须保存font-size和font-family属性，否则font无效
例如在h4中添加：
h4{
color:purple;
font:italic bold 14px 宋体;/*font综合写法*/
}
image.png
到这里字体就说完了
0092FBCE.gif
网友评论