字體樣式常用的有五種屬性，看下表。
屬性下面，我們一起來看看字體各個屬性的詳細說明。
可以使用font-family屬性來定義不同的字體，如宋體、微軟雅黑等。
font-family可以指定多種字體。使用多個字體時，將按從左到右的順序排列，並且以英文逗號（,）隔開。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>字體類型</title>
<style type="text/css">
h4{font-family: Arial;}
span{font-family: "Times New Roman";}
p{font-family: "微軟雅黑";}
div{font-family: serif;}
</style>
</head>
<body>
<h4>劉德華</h4>
<span>張學友</span>
<p>郭富城</p>
<div>黎明</div>
</body>
</html>
如果字體類型只有一個英文單詞，則不需要加上雙引號；如果字體類型是多個英文單詞或是中文的，則需要加上雙引號。
font-size屬性取值有兩種：一種是「關鍵字」，如small、medium、large等；另外一種是「像素值」，如10px、16px、21px等。
我們初入門先學習像素值就行了，之後在CSS進階中學習em和百分比等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>字體大小</title>
<style type="text/css">
h4{font-size: 10px;}
span{font-size: 15px;}
p{font-size: 20px;}
div{font-size: 25px;}
</style>
</head>
<body>
<h4>劉德華</h4>
<span>張學友</span>
<p>郭富城</p>
<div>黎明</div>
</body>
</html>
font-weight屬性取值有兩種：一種是「100~900的數值」，另一種是「關鍵字」。
關鍵字取值表
font-weight屬性可以取100、200、…、900這9個值。其中100相當於lighter，400相當於normal，700相當於bold，而900相當於bolder。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>字體粗細</title>
<style type="text/css">
h4{font-weight: 100;}
span{font-weight: 400;}
p{font-weight: 700;}
div{font-weight: 900;}
</style>
</head>
<body>
<h4>劉德華</h4>
<span>張學友</span>
<p>郭富城</p>
<div>黎明</div>
</body>
</html>
font-style屬性取值如下表
屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>字體風格</title>
<style type="text/css">
h4{font-style: normal;}
span{font-style: italic;}
p{font-style: oblique;}
div{font-style: normal;}
</style>
</head>
<body>
<h4>劉德華</h4>
<span>張學友</span>
<p>郭富城</p>
<div>黎明</div>
</body>
</html>
從頁面效果可以看出，font-style屬性值為italic或oblique時，頁面效果是一樣的！ 原因是：有些字體有斜體italic屬性，但有些字體卻沒有italic屬性。oblique是讓沒有italic屬性的字體也能夠有斜體效果。
color屬性取值有兩種，一種是「關鍵字」，另一種是「十六進位RGB值」。其它還有RGBA、HSL等，不過這些是在CSS3中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>字體顏色</title>
<style type="text/css">
h4{color: gray;}
span{color: orange;}
p{color: #03FCA1;}
div{color: #0033ff;}
</style>
</head>
<body>
<h4>劉德華</h4>
<span>張學友</span>
<p>郭富城</p>
<div>黎明</div>
</body>
</html>
———————————————————————————————— 本節主要學習了字體樣式，最後對其總結。
字體類型：font-family
字體大小：font-size
字體粗細：font-weight
字體風格：font-style
字體顏色：color