上午讲了CSS字体属性的粗细，下午来说下字体样式。CSS使用font-style属性设置文本的风格。来看下语法:
p {
font-style: normal;
}
属性值有 normal和italic
normal是默认值，浏览器会显示标准的样式 font-style:normal;
italic 浏览器会显示斜体的样式
一起看下具体的效果:
来看看对应的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字体属性之字体样式</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p>明月几时有，把酒问青天</p>
<p>不知天上宫阙，今夕是何年</p>
<p>我欲乘风归去，又恐琼楼玉宇</p>
<p>高处不胜寒，起舞弄清影，何似在人间。</p>
<p>人有悲欢离合，月有阴晴圆缺，此事古难全</p>
<p>但愿人长久，千里共婵娟。</p>
</body>
</html>
在<style>中将所有段落的字体设置为斜体
在真正的开发中，将一个大段落的文字设置为斜体比较少见，可以将已经为斜体的字设置为正常展示的，看下实际的效果和代码:
可以看到最后一行文字是倾斜的，使用了<em>
<p>但愿人长久，千里共婵娟。</p>
<em>我是倾斜的，你知道吗？</em>
可以使用font-style将斜体设置为正常，看看效果:
字体正常了！！
看下对应的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字体属性之字体样式</title>
<style>
em {
font-style: normal;
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p>明月几时有，把酒问青天</p>
<p>不知天上宫阙，今夕是何年</p>
<p>我欲乘风归去，又恐琼楼玉宇</p>
<p>高处不胜寒，起舞弄清影，何似在人间。</p>
<p>人有悲欢离合，月有阴晴圆缺，此事古难全</p>
<p>但愿人长久，千里共婵娟。</p>
<em>我是倾斜的，你知道吗？</em>
</body>
</html>
接下里说下字体的复合属性:
字体需求如下:
想要div字体倾斜、加粗、字号设置为16像素并且是微软雅黑
来看下效果:
可以看下对应代码是否满足要求:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS之字体复合属性</title>
<!--想要div字体倾斜、加粗、字号设置为16像素并且是微软雅黑-->
<style>
.pink {
font-family:"Microsoft YaHei";
font-size: 16px;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<div class="pink">十一结束了，大家要开始上班了</div>
</body>
</html>
可以看到 font-family是字体样式
font-size 大小
font-style 斜体
font-weight 加粗
好的，今天先到这里，明天就上班了。大家晚安~