CSS Fonts（字體）屬性用定義字體系列，大小粗細，和文字樣式（如斜體）
3.1字體系列
CSS使用font-family屬性定義文本字體系列
p { font-family:'微軟雅黑' ;}
div {font-family: 'Microsoft Yahei', '微軟雅黑' ; }
注意：各種字體之間必須用英文狀態下的逗號隔開
一般情況下，如果有空格隔開的多個單詞組成的字體，加引號，
盡量使用系統默認子弟字體，保證在任何用戶的瀏覽器都能正確顯示，
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字體屬性之字體系列</title> <style> h2 { font-family: '微軟雅黑'; }; p { font-family: 'Times New Roman', Times, serif; } </style> </head> <h2>pink的秘密</h2> <P>盧本偉牛逼</P> <p>盧本偉牛逼</p> </body> </html>
3.2字體大小
CSS使用font-size屬性定義字體大小
p {
font-size： 20px;
}
注意：px（像素）大小是我們網頁最常用的單位
谷歌瀏覽器默認文字大小為16px
可以給整個body指定整個頁面文字的大小
標題具有特殊性需要單獨指定文字大小，
代碼實體：
3.3字體的粗細
CSS使用font-weight屬性設定文本字體的粗細，
p{
font-weight：bold;
}
| 屬性值 | 描述 |
| normal | 默認值（不加粗的） |
| bold | 定義粗體（加粗的） |
| 100-900 | 400等同于normal，而700等同于bold 注意數字后面不能加數字 |
注意：學會讓粗標簽（如h和strong等）不加粗，或者其他標簽加粗
在實際開發中我們喜歡用數字
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS字體粗細</title> <style> .bold { /* font-weight:bold */ /* 這個700的后面不要給單位 等價于bold都是加粗的效果 */ /* 在實際開發中我們提倡使用數字 表示加粗或者變細 */ font-weight: 700; } h2 { font-weight: 400; /* font-weight: normal;實際開發中用數字 */ } </style> </head> <body> <h2>pink的秘密</h2> <p>優雅淡然</p> <p class="bold">前端必勝</p> </body> </html>
3.4文字樣式
CSS使用font-style屬性設定文本風格，
p {
font-style: normal;
}
| 屬性值 | 作用 |
| normal | 默認值，瀏覽器會顯示標準的字體樣式 font-style：normal |
| italic | 瀏覽器會顯示斜體的字體樣式 |
代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css字體屬性之文字樣式</title> <style> p { font-style: italic; } em { /* 讓傾斜的字體不傾斜 趕緊脈動起來 */ font-style: normal; } </style> </head> <body> <p>同學，上課時候的你</p> <em>下課時候的你</em> </body> </html>
3.5字體復合屬性
字體屬性可以把以上文字樣式綜合來寫，這樣可以節約代碼：
body {
font: font-style font-weight font-size/line-height font-family; } 注意： 使用font屬性時，必須按照上面的語法格式中循序書寫，不能更換循序，而且各個屬性之間用空格隔開， 不需要設定的屬性可以省略（取默認值）但必須保留font-size 和font-family屬性，否則font屬性不起作用， 代碼示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>復合屬性</title> <style> /* 想要div傾斜 加粗 字號設定為16像素 并且微軟雅黑 */ div { /* font-style: italic; font-weight: 700; font-size: 16px; font-family: 'Microsoft yahei'; line-height: normal; */ /* 復合屬性:簡寫的方式 節約代碼 */ /* 必須嚴格按照一下循序: */ /* font: font-style font-weight font-size/line-height font-family; */ font: italic 700 16px 'MicroSoft yahei'; } </style> </head> <body> <div>三生三世十里桃花</div> </body> </html>
3.6字體屬性小結
| 屬性 | 表示 | 注意點 |
| font-size | 字號 | 我們通常用的單位是px像素，一定要跟上單位 |
| font-family | 字體 | 實際作業中按照團隊約定來寫字體 |
| font-weight | 字體粗細 | 記住加粗是700或者bold 不加粗是normal或者400 記住數字不要跟單位 |
| font-style | 字體樣式 | 記住傾斜體是italic 不傾斜是normal 作業中我們常用normal |
| font | 字體連寫 | 1字體連寫是有循序的 不能隨意換位置的 2.其中字號和字體必須同時出現 |
<style></style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34084.html
標籤：Html/Css
上一篇：CSS基礎選擇器總結
下一篇：4 CSS文本屬性