字體屬性介紹
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 >成功不是打敗別人，而是改變自己，</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>
-
結果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/100468.html
標籤：Html/Css