字體的樣式
color
設置文本的顏色（前景色） ，它會應用到元素的所有邊框，除非被 border-color 或另外某個邊框顏色屬性覆蓋。
<style>
.box1 {
color: #bd6e07;
}
</style>
<div class="box1">若夫淫雨霏霏，連月不開，陰風怒號，濁浪排空</div>
font-size
- 設置字體大小，其設置的並不是文字本身的大小，在頁面中，每個文字都是處在一個看不見的框中，其實際上設置的是框格的高度，一般情況下，文字要比這個框格要小，也有時會大，字體類型不同，顯示效果也不同。
- 瀏覽器默認的字體大小為16px。
<style>
.box2 {
font-size: 30px;
}
</style>
<div class="box2">若夫淫雨霏霏，連月不開，陰風怒號，濁浪排空</div>
font-family
- 設置字體的類型，當采用某種字體時，若瀏覽器支持則使用該字體，若不支持，則使用默認字體。
- 可以同時設置多個字體，多個字體之間用逗號","分開，瀏覽器會優先使用前面的字體，若前面沒有再嘗試后一個。
<style>
.box3 {
/* 字體名帶空格的必須用雙引號("")引起來 */
font-family: Arial, 微軟雅黑, 宋體, "Sakkal Majalla", "Maiandra GD";
}
</style>
<div class="box3">若夫淫雨霏霏，連月不開，陰風怒號，濁浪排空</div>
font-style
設置文字的斜體，常用的可選值：
- normal 默認值，文字正常顯示
- italic 文字會以斜體顯示
font-style: italic;
font-weight
設置文字的加粗效果，常用的可選值：
- normal 默認值，文字正常顯示
- bold 文字加粗顯示
font-weight: bold;
font-variant
設置小型大寫字母，常用可選值：
- normal 默認值，文字正常顯示
- small-caps 文本以小型大寫字母顯示
<style>
.box4 {
font-variant: small-caps;
}
</style>
<div>ABCDEFGHI</div>
<div class="box4">abcdefghi</div>
font
設置字體相關的所有樣式
- 可以將字體的樣式值統一寫在 font 樣式中，不同的樣式值之間用空格隔開
- 在設置字體樣式時，斜體，加粗，小大字母沒有順序要求，甚至可寫可不寫，如果不寫則使用默認值
- 要求文字的大小和字體必須寫，並且字體類型必須是最后一個樣式，字體大小必須是倒數第二個樣式
- font: [font-style] [font-weight] [font-variant] font-size font-family(字體1, 字體2, ..., 字體n, 字體大分類)
<style>
.box5 {
font-weight: bold;
font-style: italic;
font-variant: normal;
font-size: 20px;
/* 最后一個樣式值是大分類名稱 */
font-family: Arial, 微軟雅黑, 宋體, "Sakkal Majalla", Serif;
}
/* [font-style] [font-weight] [font-variant] font-size font-family(字體1, 字體2, ..., 字體n, 字體大分類) */
.box6 {
font: bold italic normal 20px Arial, 微軟雅黑, 宋體, "Sakkal Majalla", Serif;
}
</style>
<div class="box5">若夫淫雨霏霏，連月不開，陰風怒號，濁浪排空</div>
<div class="box6">若夫淫雨霏霏，連月不開，陰風怒號，濁浪排空</div>
字體分類
網頁中將字體分為五大類：
- serif (襯線字體， 經常使用)
- sans-serif (非襯線字體， 經常使用)
- monospace (等寬字體， 一般不用)
- cursive (草書字體， 一般不用)
- fantasy (虛幻字體， 一般不用)
說明：
1. 將字體設置為這些大分類之后，瀏覽器會自動選擇指定的字體並顯示
2. 一般會將字體的大分類指定為 font-family 中的最后一個字體
3. font-family: 字體1, 字體2, ..., 字體n, 字體大分類