在网页的排版中，字体占据着不可分割的一大部分，为了使平淡的网页变得丰富起来，我们就可以给字体设置一些样式，下面我就给大家简单介绍一下如何设置字体样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>我如果爱你</p>
<p>绝不像攀岩的凌霄花</p>
<p>借你的高枝炫耀自己</p>
<p>我如果爱你</p>
<p>绝不学痴情的鸟儿</p>
<p>为绿荫重复单调的歌曲</p>
</body>
</html>
做出的效果如下图所示，比较平淡
120120120.png
我们就可以给我们写的p标签里面的文字设置字体样式了
首先我们可以给字体设置粗细，属性是Font-weight: ；里面的属性值可以写100px-900px，但这里要注意要写整百，比如300px,400px，一般网页中默认的字体大小是400px，也可以用normal来代替400px，那细体就可以用lighter来代替，它的值相当于300px，粗体就可以用bold和bolder来代替，bold代替的值是700px，bolder代替的值是900px，我们来给字体设置一个bold属性值来看看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
p{
font-weight:bold
}
</style>
<body>
<p>我如果爱你</p>
<p>绝不像攀岩的凌霄花</p>
<p>借你的高枝炫耀自己</p>
<p>我如果爱你</p>
<p>绝不学痴情的鸟儿</p>
<p>为绿荫重复单调的歌曲</p>
</body>
</html>
来看一下效果
的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶.png
明显看出字体有加粗的效果。
那如果我想要字体倾斜呢?就需要给字体样式，它的属性是font-style: ；属性值有normal,italic,oblique,normal是正常的意思，也是默认状态，italic和oblique是倾斜的意思，那我们来给它加上倾斜的样式看看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
p{
font-weight:bold;
font-style:italic;
}
</style>
<body>
<p>我如果爱你</p>
<p>绝不像攀岩的凌霄花</p>
<p>借你的高枝炫耀自己</p>
<p>我如果爱你</p>
<p>绝不学痴情的鸟儿</p>
<p>为绿荫重复单调的歌曲</p>
</body>
</html>
事实上事实上事实上事实上事实上事实上事实上.png
可以看出字体现在就变得倾斜了。
我们也需要给字体设置字体大小，设置字体大小的属性是font-size: ; 一般浏览器的默认字体大小是14px，那我们给字体设置25px看看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
p{
font-weight:bold;
font-style:italic;
font-size:25px;
}
</style>
<body>
<p>我如果爱你</p>
<p>绝不像攀岩的凌霄花</p>
<p>借你的高枝炫耀自己</p>
<p>我如果爱你</p>
<p>绝不学痴情的鸟儿</p>
<p>为绿荫重复单调的歌曲</p>
</body>
</html>
宋宋.png
可以明显看出来字体变大。
同时我们也可以给字体设置颜色，属性为color： ；也可以给它设置字体是什么体的，属性是font-family: ;下面我们字体设为红色楷体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
p{
font-weight:bold;
font-style:italic;
font-size:25px;
color:red;
font-family:'kaiti';
}
</style>
<body>
<p>我如果爱你</p>
<p>绝不像攀岩的凌霄花</p>
<p>借你的高枝炫耀自己</p>
<p>我如果爱你</p>
<p>绝不学痴情的鸟儿</p>
<p>为绿荫重复单调的歌曲</p>
</body>
</html>
red.png
经过这样简单的设置，字体就得到了美化。
小试牛刀，经验不足，请多指教。
