上午讲了CSS字体属性的粗细,下午来说下字体样式。CSS使用font-style属性设置文本的风格。来看下语法:

p {

font-style: normal;

}

属性值有 normal和italic

normal是默认值,浏览器会显示标准的样式 font-style:normal;

italic 浏览器会显示斜体的样式

一起看下具体的效果:

html设置字体样式的属性(测试开发全栈-HTML)(1)

来看看对应的代码:

<!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>中将所有段落的字体设置为斜体

在真正的开发中,将一个大段落的文字设置为斜体比较少见,可以将已经为斜体的字设置为正常展示的,看下实际的效果和代码:

html设置字体样式的属性(测试开发全栈-HTML)(2)

可以看到最后一行文字是倾斜的,使用了<em>

<p>但愿人长久,千里共婵娟。</p>

<em>我是倾斜的,你知道吗?</em>

可以使用font-style将斜体设置为正常,看看效果:

html设置字体样式的属性(测试开发全栈-HTML)(3)

字体正常了!!

看下对应的代码:

<!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像素并且是微软雅黑

来看下效果:

html设置字体样式的属性(测试开发全栈-HTML)(4)

可以看下对应代码是否满足要求:

<!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 加粗

好的,今天先到这里,明天就上班了。大家晚安~

,