字體屬性介紹
CSS中的字體屬性是干什么的呢？字體字體肯定和字體有關咯，就是設置HTML頁面中文本的字體，
CSS中常用的字體屬性有幾種呢，筆者給大家梳理了下，比較常用的一共有5種，今天我們就看看這5種能給文本的字體帶來什么效果呢。CSS字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）。- 在
CSS中常用的字體屬性有5種，如：font-style、font-weight、font-size、font-family、font。
font-style設置斜體
font-style屬性主要是給文本設置斜體用的。
font-style屬性使用表
| 值 | 描述 |
|---|---|
| normal | 將斜體字體恢復正常。 |
| italic | 設置字體為斜體。 |
-
讓我們進入
font-style屬性的實踐，實踐內容如：將HTML頁面中的p標簽的文本字體設置為斜體。 -
假如我們不使用
font-style屬性,可不可將p標簽中的文本字體設置為斜體呢？，如果大家學習HTML還可以，應該知道在HTML當中有一個i標簽，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>設置字體為斜體</title>
</head>
<body>
<p>成功不是打敗別人，而是改變自己。</p>
<p><i>成功不是打敗別人，而是改變自己。</i></p>
</body>
</html>
-
結果圖
-
注意：使用
font-style屬性可以將i標簽自帶的斜體功能給去除掉，如：下面關鍵代碼哦。
<style>
i{
font-style: normal;
}
</style>
- 使用
font-style屬性設置文本的字體為斜體。 -
代碼塊
<!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>設置字體為斜體</title>
</head>
<style>
p{
font-style: italic;
}
</style>
<body>
<p>成功不是打敗別人，而是改變自己。</p>
</body>
</html>
-
結果圖
font-weight設置字體粗細
font-weight屬性是用來設置文本的字體粗細。
font-weight屬性說明表
| 屬性值 | 描述 |
|---|---|
| normal | 將文本的粗細恢復為正常。 |
| bold | 字體加粗。 |
| 100到900 | 字體加粗 |
- 讓我們進入
font-weight屬性實踐，內容將HTML頁面中的p標簽文本字體加粗，筆者使用class屬性值為.box將第一個p標簽文本字體加粗為900，為什么用class屬性值為.box呢，方便初學者理解，其余的都是一樣的，就不過多的說明了。 -
代碼塊
<!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>設置字體粗細</title>
</head>
<style>
.box{
font-weight:900;
}
</style>
<body>
<p class="box">成功不是打敗別人，而是改變自己。</p>
<p>成功不是打敗別人，而是改變自己。</p>
</body>
</html>
-
結果圖
font-size設置字體大小
-
font-size屬性就是設置文本的字體大小，由於font-size屬性值比較單一，就不用font-size屬性說明表解釋了，font-size屬性值是px為單位。 -
讓我們進入
font-size屬性的實踐，實踐內容如：將HTML頁面中的p標簽文本字體大小設置為14像素。 -
代碼塊
<!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>設置字體大小</title>
</head>
<style>
p{
font-size: 14px;
}
</style>
<body>
<p>成功不是打敗別人，而是改變自己。</p>
</body>
</html>
-
結果圖
font-family 設置字體
font-family屬性給文本的字體設置風格，如：微軟雅黑、楷體、宋體....- 園友都看到這里了，相信大家都有了一定的自學能力了，就不多介紹了，直接上關鍵的代碼了，大家可以自己嘗試各種字體哈。
-
代碼塊
font-family: "微軟雅黑";
-
注意：
font-family屬性可以使用多個如：font-family: "微軟雅黑","宋體",....; -
細節：一般很特殊的字體，網站上面都是使用圖片來表示。是否能顯示此字體是根據用戶電腦里面是否對應的字體文件，如果沒有該文件就會顯示為宋體。
font字體設置的縮寫
- 縮寫屬性能夠同時給文本設置斜體、加粗、大小、字體，每一個值之間要使用逗號隔開，並且一定要有順序。
- 讓我們進入
font字體設置縮寫實踐，實踐內容如：將p標簽中文本設置為斜體、加粗、大小、字體。 -
代碼塊
<!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>字體設置的縮寫</title>
</head>
<style>
p{
font: italic 900 14px "微軟雅黑";
}
</style>
<body>
<p>成功不是打敗別人，而是改變自己。</p>
</body>
</html>
-
結果圖
