在網(wǎng)頁(yè)的排版中产舞，字體占據(jù)著不可分割的一大部分，為了使平淡的網(wǎng)頁(yè)變得豐富起來(lái)讨跟，我們就可以給字體設(shè)置一些樣式纪他，下面我就給大家簡(jiǎn)單介紹一下如何設(shè)置字體樣式。
<!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>我如果愛(ài)你</p>
<p>絕不像攀巖的凌霄花</p>
<p>借你的高枝炫耀自己</p>
<p>我如果愛(ài)你</p>
<p>絕不學(xué)癡情的鳥(niǎo)兒</p>
<p>為綠蔭重復(fù)單調(diào)的歌曲</p>
</body>
</html>
做出的效果如下圖所示晾匠，比較平淡
我們就可以給我們寫(xiě)的p標(biāo)簽里面的文字設(shè)置字體樣式了
首先我們可以給字體設(shè)置粗細(xì)茶袒，屬性是Font-weight: ；里面的屬性值可以寫(xiě)100px-900px凉馆，但這里要注意要寫(xiě)整百薪寓，比如300px,400px，一般網(wǎng)頁(yè)中默認(rèn)的字體大小是400px澜共，也可以用normal來(lái)代替400px向叉，那細(xì)體就可以用lighter來(lái)代替，它的值相當(dāng)于300px嗦董，粗體就可以用bold和bolder來(lái)代替母谎，bold代替的值是700px，bolder代替的值是900px京革，我們來(lái)給字體設(shè)置一個(gè)bold屬性值來(lái)看看效果
<!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>我如果愛(ài)你</p>
<p>絕不像攀巖的凌霄花</p>
<p>借你的高枝炫耀自己</p>
<p>我如果愛(ài)你</p>
<p>絕不學(xué)癡情的鳥(niǎo)兒</p>
<p>為綠蔭重復(fù)單調(diào)的歌曲</p>
</body>
</html>
來(lái)看一下效果
明顯看出字體有加粗的效果奇唤。
那如果我想要字體傾斜呢?就需要給字體樣式，它的屬性是font-style: 匹摇；屬性值有normal,italic,oblique,normal是正常的意思咬扇，也是默認(rèn)狀態(tài)，italic和oblique是傾斜的意思来惧，那我們來(lái)給它加上傾斜的樣式看看效果冗栗。
<!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>我如果愛(ài)你</p>
<p>絕不像攀巖的凌霄花</p>
<p>借你的高枝炫耀自己</p>
<p>我如果愛(ài)你</p>
<p>絕不學(xué)癡情的鳥(niǎo)兒</p>
<p>為綠蔭重復(fù)單調(diào)的歌曲</p>
</body>
</html>
可以看出字體現(xiàn)在就變得傾斜了。
我們也需要給字體設(shè)置字體大小，設(shè)置字體大小的屬性是font-size: ; 一般瀏覽器的默認(rèn)字體大小是14px隅居，那我們給字體設(shè)置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>我如果愛(ài)你</p>
<p>絕不像攀巖的凌霄花</p>
<p>借你的高枝炫耀自己</p>
<p>我如果愛(ài)你</p>
<p>絕不學(xué)癡情的鳥(niǎo)兒</p>
<p>為綠蔭重復(fù)單調(diào)的歌曲</p>
</body>
</html>
可以明顯看出來(lái)字體變大钠至。
同時(shí)我們也可以給字體設(shè)置顏色，屬性為color： 胎源；也可以給它設(shè)置字體是什么體的棉钧，屬性是font-family: ;下面我們字體設(shè)為紅色楷體。
<!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>我如果愛(ài)你</p>
<p>絕不像攀巖的凌霄花</p>
<p>借你的高枝炫耀自己</p>
<p>我如果愛(ài)你</p>
<p>絕不學(xué)癡情的鳥(niǎo)兒</p>
<p>為綠蔭重復(fù)單調(diào)的歌曲</p>
</body>
</html>
經(jīng)過(guò)這樣簡(jiǎn)單的設(shè)置涕蚤，字體就得到了美化宪卿。
小試牛刀，經(jīng)驗(yàn)不足万栅，請(qǐng)多指教佑钾。
